Preserving paging and selection on *local* data source updates

BIOSMonkey

The views I am building with DataTables periodically need to poll the server to check for updates.

From what I can tell, DT seems to be built to preserve paging location, selections etc. only from an ajax reload (https://datatables.net/extensions/select/examples/initialisation/reload.html)

The problem is, my data source is not a simple ajax request ... I have to handle all that myself and make multiple fetches to ultimately create the data list (for example, to create an address book I have to make multiple calls to build each recipients data row).

I had hoped that the rowId function would serve a similar purpose as "track by" in Angular (and set to a unique key like the email address), but cannot see a clear way to fetch the server data myself and then locally update the data source such that DT can perform the preservation function as described in the above "reload" link.

So far I have seen only the clear>rows.add>draw sequence, but that resets the current page and user selections.

I hope I am missing something!

kthorngren

Here is an example that uses select, rowId and draw(false) to redraw the table keeping the row selections and stay on the current page:
http://live.datatables.net/nusefuno/1/edit

The draw() API has a boolean value that determines whether to stay on the current page or go to the first page. You are correct that using rowId the selected rows should be selected again after drawing the table.

clear>rows.add>draw

However if you are using clear then I suspect (haven't tried) the selected rows won't be reselected. Would need to test to verify. Are you wanting to use clear and reselect the rows?

Kevin

BIOSMonkey

I believe I solved it....

The key is using ajax as a function which calls my original code to get the data and create the list as I need it, and then pass that list back to the ajax function's callback.

However... this was not working originally and was throwing a script error. After some digging into the datatables.js source, the problem was in the function _fnAjaxDataSrc whereby the data source was being assigned the default value of sAjaxDataProp, which is "data". I needed the value of dataSrc to be "" so that the return value would be my flat json, so in my table init I set sAjaxDataProp : "" .

This made it work, however, the code that I had AFTER the table init to relocate the button container no longer worked, presumably because it was firing too soon before the ajax handler completed. So I fixed that by moving it into an initComplete handler to guarantee the button container existed before relocating it.

After doing these things, and making sure I used ajax.reload(null, false) to preserve paging location, everything seems to work so far. I created a button that simply made the table.ajax.reload(null, false) call, made some selections on page 1, went to page 2 and made a few more selections. I then changed the offline data for a visible record on page 2, and hit the reload button, and everything stayed intact while ONLY the row data changed. Success.

I hope this helps someone.