JQuery DataTables add rows dynamically removes some initialization

Question

I have successfully worked with jQuery DataTables and they look and work great. But I switch to adding lines dynamically, and some formatting disappears when adding lines.

1. The background color of the columns disappears 2. The selected background color of the masonry also disappears 3. and if you click on the column headers, it will destroy all the rows and reset the DataTable to its original state with all the background colors and select the background of the column, as it should be.

This is how the "

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

This is how I add new lines:

 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 a row, you must use fnAddData () , you must not add <tr> , otherwise you are violating the table

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