Question

I have successfully worked with jQuery DataTables and they look and function great. But I’m switching to adding rows dynamically and some of the formatting disappears when the rows are added.

1.The background colors of the columns disappear
2. the selected clumn background color disappears as well
3. and if you click on the column headers it kills all the rows and resets the DataTable to its initial state with all the background colors and select column background back as they should be.

This is how the table is initialized”

oTable = $('.utable').dataTable( {"sDom": 'rt',"sScrollY":"260px", "bPaginate":false, "bFilter":false, "bInfo": false});

Here is how I add the new rows:

document.getElementById('tbdy').innerHTML="<tr id='zrow16' class='gradeX'><td id='d1'>None</td><td id='d5' class='ralign'>None</td><td id='d6' class='ralign'>None</td></tr>";...<tr id='zrow17' class='gradeX'><td.... "

Answer 1

To add row you should use fnAddData(), you shouldn’t append a <tr> otherwise you break the table

var giCount = 2;
function fnClickAddRow() {
  oTable.fnAddData( [
    giCount+".1",
    giCount+".2",
    giCount+".3",
    giCount+".4",
   '<input type="checkbox">']
  );

  giCount++;
}