Make ajax call only on pagination change

Tronik

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

kthorngren

but Im not really happy with how the rows load visually (jumps in table when the rows and images are loaded).

What do you mean by "jumps in table"?

I thought that regular pagination only made ajax call when page changed but i found out that it loads all data from server.

Server side processing is a client/server model. When serverSide is 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

Tronik

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

allan

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:

• All images are the same hight (actually more specifcally, all rows are the same height, which perhaps means the same thing for images). This is probably the "jump" you are seeing.
• The <img> tags should have height and width attributes, 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