Jquery datatable not updating with html data - jquery-plugins

Question

I have used jquery datatable plugin.
And I have the following problem.
Fiddle
Html:
<input type="button" value="click" id ="button" />
<table id="testTable">
<thead>
<td>
col1
</td>
<td>
col2
</td>
</thead>
</table>
JS:
(function(){
var firstData = "<tr>" +
"<td>" +
"cell11" +
"</td>" +
"<td>" +
"cell12" +
"</td>" +
"</tr>" +
"<tr>" +
"<td>" +
"cell21" +
"</td>" +
"<td>" +
"cell22" +
"</td>" +
"</tr>";
debugger;
$(firstData).appendTo($('#testTable'));
$('#testTable').dataTable();
})();
$('#button').click(function(){
var secondData = "<tr>" +
"<td>" +
"cell31" +
"</td>" +
"<td>" +
"cell32" +
"</td>" +
"</tr>" +
"<tr>" +
"<td>" +
"cell41" +
"</td>" +
"<td>" +
"cell42" +
"</td>" +
"</tr>";
$('#testTable tbody').empty().append($(secondData));
});
I initialized table as datatable with firstdata. sorting , searching etc are working perfect as expected. But I later altered the body with secondData. Now also sorting and searching is done on first data. How to resolve this?

Answer 1

You must go through the dataTables API. You can manipulate the content of a <table> through javascript or jQuery, but without using the API, jQuery dataTables has no chance of knowing what manipulations you have done. Thats why the old rows still appears after deletion.
You are using dataTables 1.10.x, and in that version the API has been dramatically simplified. Simply use
<dataTables instance>.row.add(..)
You have a chunk of HTML with <tr>'s you want to inject :
dataTable.clear();
$secondData = $(secondData);
for (var tr=0;tr<$secondData.length;tr++) {
var tds = $($secondData[tr]).find('td');
var cols = [];
for (var td=0;td<tds.length;td++) {
cols.push($(tds[td]).html());
}
dataTable.row.add(cols);
}
dataTable.draw();
It seems like a lot of code, but only because we here parse a piece of HTML in the process. Normally you would insert a row like this
dataTable.row.add(['cell31', 'cell32']);
forked fiddle -> http://jsfiddle.net/QgGKD/