Issue when using HTML DOM to load / reload tables

stocknrock

We are currently experiencing getting DataTables to work when we use HTML DOM to load/reload our tables.

Here is the sequence how we use it.

1. On page load, we get data from a web service. We build an HTML table out of it and initialize the DataTable harnessing its data load from DOM feature.

2. Later on a user event we retrieve new data from web service, again we build TBODY part and initialize the DataTable again on same table.

3. Now, the DataTable is able to show the new data. However, number of records and pager are not updated accordingly. When we click on column to sort or search or click on pager, it starts to show the data we used first time.

4. Problem is demonstrated here http://live.datatables.net/ditovopi/2/edit?html,js,output

Request your support on this whether we are missing a step or not correctly using the feature.

tangerine

Your initial table is assigned to a variable.

  var table = $('#example').DataTable();

Should your subsequent reference to $('#example').DataTable(); be re-using the same variable?

AliBah

.DataTable() create JS object and also change HTML. You cannot simple add new html rows and call this method again.

At least you need to clean htm, create new, delete datable JS object and recreate it.

But i believe you need to change your solution and update your table data by some other way. Use server side processing, refresh data by timer or smth else.

allan

Yes, you need to use the API to change the data that the table shows and DataTables does not monitor the DOM. For example you would need to use rows().remove() to delete rows and rows.add() to add new rows.

Allan

stocknrock

Thank you @allan. Your answer helped.