Prerendered table is visible and rendering Datatable takes a bit too long

Chrom

My original html table is visible for like one or two seconds before the proper Datatable is rendered and sorted.

Is it possible to only show the Datatable? The table has around 4000 rows with 6 columns.

Are there possibilities to achieve that? Is it a speed problem? Do I need to do server processing?

(I am using it in a wordpress installation. How would I do the server processing stuff)

Thank you!

kthorngren

Sounds like you are populating the table in the DOM then initializing Datatables using the DOM sourced table. If this is correct then you can hide the table then use initComplete to show the table.

Kevin

Chrom

Hi! Do you mean something like <tbody style="display:none"> and then do something like "initComplete": function( settings, json ) {
show the table again;
}

Anyways I created already a wordpress custom endpoint which provides the data in json.

Then I make an ajax call with Datatables and create the table.

It is still a bit slow. It takes like two seconds to load the table.

I hoped to make it faster.

Are there other settings available? Maybe something like only getting the first 50 rows.
(which I guess doesn't make sense because the list must be sorted with all available rows)

Any ideas?

Chrom

Something? I am too inexperienced with all the available commands to find it out myself. thx

kthorngren

See this FAQ. If you are using the Datatables ajax option to load the data then try deferRender. If that doesn't help the next step is server side processing. You will need a server script that follows this protocol to perform the paging, etc at the server.

Kevin

Chrom

Thank you! I am using the deferRender already.

I read about the server side processing also. I am not sure if I understand it though.

Will serverside processing speed up the initial loading comared to ajax with deferRender? (All the operations after loading are fast enough, changing page, searching etc...)

Are the somewhere example scripts, how to implement that on the server side?

Chrom

I got it almost but I have a pretty noob question which is more wordpress php related. I don't know how I set up a ajax url in wordpress. Maybe somebody can help?

I am still wondering though if I also could use the REST api instead?

Here is the thread to my question https://stackoverflow.com/questions/71193075/how-to-set-an-ajax-url-in-wordpress-i-want-to-call-it-with-datatables

Chrom

I managed to do the ajax stuff and now the table works in server side processing.

The load time is the same as when rendered in client :-D

I have another question. The following options dont change anything for me. Should I see a load icon or something? Also when I enter in the search the keyboard values in the input field show up lagging.

   "processing": true,
    searchDelay: 1000,

kthorngren

The load time is the same as when rendered in client :-D

Sounds like your server script is returning all the rows. The server script should be returning only the rows to be displayed on the page. The server scrip tis responsible for all searching, sorting and paging of the table. You can use the browser's network inspector to see what is returned. Take a look at this running example. It uses this ssp.class.php PHP script.

Sorry, I'm not familiar with Wordpress. I wonder if this tutorial might help.

Kevin

Chrom

is that the right commands for rows and language?

pageLength: 5,
recordsTotal: 50,
language: {
url: 'dataTables.german.json'
}

neither the amount of rows nor the language changes somehow

also using this

language: {
search: "Search in table:"
}

has no effect. The description of table does not change.

or do I need to implement more on the serverside script?

Also somthing I still not understand is how to include different plugin files. I save them on the server and then I need to provide some ajax link again?? Is there another way, can I just copy the contents of the plugin file somewhere?

Maybe is there a way to write the changes directly in the file. I am not sure what is going on. Why its not taking any changes. Maybe something with wordpress?

Chrom

Found the issue. I was putting the commands in the ajax brackets. No wonder it didnt work.

But again, is pageLength and recordsTotal the settings which should make it faster or is it something that I need to implement on the server side?

Chrom

But is it normal that searching and sorting is not working with server side processing? Do I need to implement these kind of functions myself???

kthorngren

When you enable server side processing the server scrip tis responsible for performing the sort, searching and paging functions. None of these will work client side. The client side will send requests to the server for the page data. In the request it will send these parameters to the server. The server script will use the parameters to query the DB for the specific rows for the page and return those rows to the client along with these parameters.

Checkout the examples I linked previously for more information.

Kevin

Chrom

uffff.... so I need to come up with my own sorting and searching algorithms? I think thats I will not manage to come up with the algorithms. It seems difficult :-D

It means actually I need to do a searching, sorting and then select in the serverside script the e.g. 50 results....?

Does that mean also that there will be only 50 rows in the dom available? (If I want to access all the other rows with jQuery on client side, this will not be possible anymore?)

kthorngren

Does that mean also that there will be only 50 rows in the dom available? (If I want to access all the other rows with jQuery on client side, this will not be possible anymore?)

Yes, you can't have both server side processing and all the data client side at the same time

There is a trade off between client side performance and the complexity of needed to create a server side processing capable script.

Kevin

Chrom

ok. In the documentation is written that table data lower than 10000 rows should be implemented in client side.
I have around 6000 rows with 6 or 7 columns.

So why should you do go with client side below 10k?

Just because of the complexity of implementing a server script?

I am wondering if I should do it or not, because of the complexity I might have to deal with. e.g. sorting Umlaute, then paging etc....

colin

So why should you do go with client side below 10k?

There's no fixed answer as to when you should go with client or server-side processing. If on the client, then no network traffic is needed - if on the server, then the client can hold less data. So it really depends on how much data you have, and how fast your network is.

Just because of the complexity of implementing a server script?

If you download the DataTables repo, there are examples of the server-side scripts in /examples/server_side/scripts - those scripts are generally all that most users need.

Cheers,

Colin

Chrom

thank you!