Load more button

nduvieilh

I have been scouring the web trying to find an elegant solution and have not been able to find anything on the subject but we have an ajax source for our data, I want to make a load more button at the bottom of the page and once the button is pressed it loads 'x' more results from the server and appends it to the end of the table. We need to use an ajax source to still have the ability to search our database without having to load all results to our page everytime.

What I've tried:
I have an ajax function that submits info to our backend and returns a correctly formed JSON array with the exact data I want: 'x' records starting one element after our last in the table. What I do not know is how to append this to the current table. I've tried sending the results to the table using fnAddData(json.aaData, true) or fnAddData(json.aaData, false) followed by fnDraw() it looks like it works correctly but my network tab in chrome developer tools shows me that two ajax calls are returning, one that I made with the correct info and one that datatables made which pull all the results already on the table+'x' new results. I need to know how to prevent datatables from making the sequential call (I imagine part of fnDraw() ) and how to append my results (JSON) to the end of the table. Any suggestions?

This might help: ehejaq (datatables debug)

allan

You've got server-side processing enabled. That means that every single draw, DataTables will make a request to get more data. That's the whole point of server-side processing!

fnAddData is a client-side function - it is useless when you have server-side processing enabled. As the documentation for it says:

> Please note that this is suitable for client-side processing only - if you are using server-side processing (i.e. "bServerSide": true), then to add data, you must add it to the data source, i.e. the server-side, through an Ajax call.

Perhaps the new documentation for 1.10 might help: http://next.datatables.net/manual/data#Processing-modes .

Allan

nduvieilh

So is there a way to append the json data received from the server-side? I'm at a lose as to figure that out. It seems every time it makes a call it completely destroys every record in the table and redraws the whole thing.

Also have you heard of any 'load more button' versions of datatables created by the community? I've been searching alot but have not been able to find anything?

allan

> It seems every time it makes a call it completely destroys every record in the table and redraws the whole thing.

That is correct. That is how server-side processing operates. The data for every draw must be retrieved from the server. That is how it is designed to operate and how it does.

> Also have you heard of any 'load more button' versions of datatables created by the community?

A load more button doesn't make sense with server-side processing to be honest. If you want to show more data, redraw the table with a larger display length.

With client-side processing, then it is as trivial as you initially suggest, just use fnAddData .

Allan

nduvieilh

We want to use server side processing because we have a data source of 50,000+ records so we don't want to wait for all of those records to load if majority of users will only be interested in seeing the first ~100. All were really looking for is a way to append the next 10 results to the end of the datatable from the ajax call. By saying redrawing the table every time we want 10 more results loaded is very inefficient. For the initial call were pulling about 3.6 KB which is about 10 results (10 columns). Every click of the load more button calls for 10 more results to be appended to the table. Which I currently have setup the way you're saying with using a fnAddData(json.aaData, true) and extending the number of results being shown but every call of fnAddData(json.aaData, true) does a ajax call that returns n*3.6 KB (n being how many times 'load more' is pressed) as opposed to just an additional 3.6 KB per click. Its not that big of a deal for the first few clicks but say they're pressing the 'load 100 more' button 5 times that a difference of 360 KB and 1,800 KB for the 5th press. We can handle the server load but obviously the goal is efficiency. Is there a easy way to rewrite the pre-generated ajax call that datatables makes for fnDraw() and how it handles that data afterwards?