Make ajax call only on pagination change
Make ajax call only on pagination change
Tronik
Posts: 122Questions: 28Answers: 1
Hi,
I use Editor library to load data into the table with the service-side option.
I also load an image from another server of mine,
{
"data": "id",
render: function ( data, type, row ) {
if(row.type.type.includes("image"))
return "<a target='_blank' href='https://api.server/assets/"+data+"'><img style='margin:0;' src='https://api.server/assets/"+data+"?key=thumbnail'></a>";
else
return "";
}
},
Naturally Datatables will load all rows (15000+) along with all the image thumbnails, which seems uneccesary heavy for my api server, the image loading I mean.
I can see in chrome inspection that it loads every single image
Using Scroller plugin works in that regard that it will only make ajax call when the break point is reached, but Im not really happy with how the rows load visually (jumps in table when the rows and images are loaded).
I thought that regular pagination only made ajax call when page changed but i found out that it loads all data from server.
Was trying the https://gyrocode.com/articles/jquery-datatables-load-more-button/ which i find really nice in terms of UI
Scroller with a load more button would be the best but given the plugin name I realize that is not an option 
Answers
What do you mean by "jumps in table"?
Server side processing is a client/server model. When
serverSideis enabled Datatbles will send a request for the page to the server. You will need a server script that supports the server side processing protocol to support server based paging. It sounds like you might not be using a server script that supports server side processing. What are you using?Can you post a link to a test case showing these issues?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
I'm not familiar with the Gyrocode Load More plugin. You can ask the developer questions about the plugin.
Kevin
By "jumps in table" I mean when the users scroll and reaches the point where an ajax call is made, it will load for a few seconds (the time it takes to load more data from server) and the user might continue to scroll while the loading occurs - when complete the table will in a way re-draw and put the user in on a different position in the table.
Hope my explanation was not too bad.
Im using the Editor library for the server side script
You could disable scrolling and enable paging (which I presume you've disabled)? That way the request to get the image will only happen when the row is drawn for the page being displayed, but you could still serve up the full data set in the first Ajax response.
If you do want to use scrolling, then yes, Scroller with server-side processing is the way to go. You will need to ensure that:
<img>tags should haveheightandwidthattributes, so DataTables knows how large they are.If you are using the Editor libraries, then they have server-side processing support built in.
I would seriously consider just using paging though.
Allan