Reload after $('table').append();

Bruno42

I'm using DataTables v1.10.21 and I'd like to refresh/reload the table after an event being triggered.

The data is correctly being refreshed in the jQuery DOM but does not seem to be updated in DataTables, even after calling the various invalidation or reload functions.

Solution I've tried so far

• The data is not refreshed via Ajax/json, so I cannot use table.ajax.reload() Instead, the is modified directly with $('#myTable').append('<tr><td>New data</td></tr>');
• I'm not using DataTables API (rows.add()) for the same reason
• I tried using table.destroy(); and recreate it, but it's using the old DOM data
• I tried using table.rows().invalidate() but same issue

JS Fiddle to reproduce

https://jsfiddle.net/Bruno42/650ao4ec/3/

Debugger code

https://debug.datatables.net/oxovim (seems to lead me to a 404 though, but you can launch it on JsFiddle)

Thank you

kthorngren

The easiest way is to use row.add(). You can add the HTML string '<tr><td>New data</td></tr>' by using jQuery, like this:
row.add($('<tr><td>Entry 4</td><td>Test 4</td></tr>'))

Here is the updated example:
https://jsfiddle.net/fh9rczxb/

Note you can properly sort and search.

Kevin

Bruno42

Indeed it seems to work well, Thank you @kthorngren !

I tried using row.add() before but I guess my mistake was no to call draw() right after.