Up to 500 rows to load but very slow due to images in the first column

rabiaah

I'm not using Server side as the Rows are not more than 500 in the table but due to existing Images which I see in the Networking loaded and slow the overall Datatable load.

How I can make it possible to ask from Datatable not to load images as part of the overall load and to be loaded like a lazy mechanizm.

I'm using the below libraries:
DataTables 1.10.20
JQuery: 3.3.1

Please advise in priority.

Thanks in advance,

kthorngren

It depends on exactly where the delay is. One option is to use deferRender as described in the Speed FAQ. Its easy to try

There isn't anything built into Datatables to do what you are asking. One idea is to use draw to check the rows on the page to see if they have the images. Use rows().data() with the selector-modifier of { page: "current" }. You can loop through these rows using rows().every(). Build an array of rows that need the images using a unique identifier.

With one jQuery ajax() request send the array to the server. The response will have all the images to update with the unique row information. Loop through the response to apply the images to the appropriate rows.

Another less efficient but easier option is to use rowCallback. In the function you can check to see if the image exists and if not fetch it via jQuery ajax() then display in the proper cell. This will cause separate ajax requests for each row needing the image. Where above it uses one ajax request to fetch all the needed images.

Here is a simplistic example using rowCallback. It performs the ajax request for each row on the page - you may want only fetch the image if its needed. It has two updates; one for the Office and the other, simulating the image fetch, for Position. Due to the async ajax request you will see the Office is updated first. The Office update is just there to demonstrate how the async ajax requests might affect the table display.
https://live.datatables.net/qehepivi/1/edit

The createdRow option is similar to rowCallback except it runs against all the rows in the table when Datatables is initialized. However if you use deferRender it will only run against the rows created for the current page. You won't need to check if the image has been fetched as this callback only runs once. Read the deferRender docs carefully to make sure it won't cause issues, ie using something like cells().nodes().

Three options for you to evaluate to see which works best in your environment.

Kevin