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 .

Answer 1

Using fnClickAddRow, as @Shawn suggests, is the proper way to do it. However, I guess it requires som major changes in your code, and in fact it is not nessecary.

The main problem with your code is that for some reason table.insertRow() inserts the row in , not . Datatables requires a section and can only handle one -section.

The workaround is to create the in code as well, and use tbody.insertRow instead of table.insertRow.

Second, be sure to initialize the datatable after all data is inserted. In the example below I call a function when the counter i has reached it's max, but you may want to do it in some other way.

The following code works, eg data is inserted by native javascript in a loop as above, and the resulting datatable supports sorting, counting and so on.

Test table, note without tbody!

A
B
C
D
E
F
G
H

Script, almost as your loop above except I am addressing the tbody-variable instead of table. TIP : Use insertRow(-1) instead of thisRowCount etc, it is easier and does the same

This results in a functional datatable without errors or warnings :

PS : Guess response.userListReturns[i].userLiginName is a typo??