Jquery DataTable - Cannot add rows on pages other than the first one
<p>I'm ajax-loading html table rows as a string, appending it to the table body and initializing a datatable:</p>

<pre><code>// ajax_data.response_message is a string, containing rows like: "&lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;Some data&lt;/td&gt;&lt;/tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;Some data 2&lt;/td&gt;&lt;/tr&gt;"
contracts_table.find('tbody').empty().append(ajax_data.response_message);
data_table = contracts_table.DataTable({

    fixedHeader: {
        header: true,
        footer: true
    },
    responsive: true,
    aoColumnDefs: [{
        'bSortable': false,
        'aTargets': ['_nosort']
    }],
    bAutoWidth: false,
    iDisplayLength: 20,
    aLengthMenu: [[5, 10, 20, 50, 100], [5, 10, 20, 50, 100]],
    }
});
</code></pre>

<p>And when I'm deleting or adding rows on the first page, it's working fine:</p>

<pre><code>// rows is an array like: ["1288", "3218", ...]
var remove_rows = function(rows) {

    for (var key in rows) {
        if (rows.hasOwnProperty(key)) {
            console.log('remove: ');
            console.log(data_table.row($('.check-single#' + rows[key] +  '').closest('tr')).remove());
        }
    }
    data_table.draw(false);
};


// contract_rows is a string, containing rows like: "&lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;Some data&lt;/td&gt;&lt;/tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;Some data 2&lt;/td&gt;&lt;/tr&gt;"
var add_rows = function(contract_rows) {

    var crows = contract_rows.split('&lt;/tr&gt;');
    for (var key in crows) {
        if (crows.hasOwnProperty(key) &amp;&amp; crows[key] != "") {
            //
            var new_row = crows[key] + '&lt;/tr&gt;';
            console.log('add: ');
            console.log(data_table.row.add($(new_row)[0]));
        }
    }
    data_table.draw(false);
};
</code></pre>

<p>On other pages it's deleting rows successfully, BUT is not adding new rows. I couldn't find the reason why. Could someone help me with this, I'd be very grateful.</p>