Load data from AJAX, ADD rows to table not a full refresh

tylerkershner

Hi everyone,

I'm currently trying to use DataTables + Scroller to implement an infinite scroll. I think I'm pretty close, just have one last issue to work out.

I've got everything working great for loading new data via AJAX: once the page hits a certain scroll threshold, the table.ajax.url(<my new URL>).load() is called and the table is refreshed.

This works great, except I lose all the previous data, kinda killing the point of an infinite scroll. I want to be able to use the .load() API function but have the result rows simply appended to the end of the existing table instead of taking the place of the original data.

Per the documentation, it seems like this is accomplished by setting the resetPaging option of the load() function to false, but that did not do the trick. I expect it maintains the paging, but it still replaces all the data in the table.

Anyone have any tips for how to accomplish this? Let me know if I need to be more clear, thank you!

tylerkershner

Just as a quick bump and to clarify my question:

It seems like the thing preventing me from doing what I want is the ajax.url().load() function automatically calling .draw(). If I could have the table simply make the AJAX request and get references to the data returned without redrawing the table, I could then call rows.add() manually with the data and everything would work just fine.

Looking at the documentation for the ajax functionality, it's not jumping out at me if this is possible or not. Anyone have any idea? Thanks for your help!

allan

This works great, except I lose all the previous data, kinda killing the point of an infinite scroll

Yup - it just calls the reload function. The idea with that method was that you would change the URL, so any old data would no longer be relevant.

You are correct that you need to use rows.add() to add the new rows. The downside, as you have noted, is that you need to make the Ajax request to get the data yourself (i.e. using $.ajax()) rather than using DataTables' internal Ajax handling.

Regards,
Allan