jquery datatable display No data available in table after creting table Row runtime(javascript)

Question

i am trying to display table(`Jquery DataTable`) of data witch i created from `JavaScript` but some how the table is display like this . `Jquery DataTable` Properly display but the functionality is not working even if i do search then it display notification `No data available in table` Even if i do right click in page and `View Page Source` the new Row is not display their. I don't no what is the problem hear i put the code of initialization for data table , ``` $(document).ready(function() { $('#example').dataTable({ "sPaginationType" : "full_numbers" }); }); ``` code for insert row in table ``` $("#example").find("tr:not(:first)").remove(); for (var i = 0; i < response.userListReturns.length; i++) { var table = document.getElementById("example"); var thisRowCount = table.rows.length; var row = table.insertRow(thisRowCount); var cell1 = row.insertCell(0); cell1.style.paddingTop = '4px'; cell1.style.paddingBottom = '4px'; cell1.style.textAlign = "center"; if(i%2!=0) cell1.style.backg…

Accepted Answer

It seems you are adding the rows manually and I am not sure that will work well with datatables. I recommend you read there api and if you insist on doing it this way you can use fnAddData, straight from the site the usage looks like:

```
var giCount = 2;
$(document).ready(function() {
  $('#example').dataTable();
} );

function fnClickAddRow() {
  $('#example').dataTable().fnAddData( [
  giCount+".1",
  giCount+".2",
  giCount+".3",
  giCount+".4" ]
);

giCount++;
```

}

you can then still style the table through css.

jquery datatable display No data available in table after creting table Row runtime(javascript)

Solution

Problem