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

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

ChromChrom Posts: 44Questions: 15Answers: 1
edited February 2022 in Free community support

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!

Answers

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    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

  • ChromChrom Posts: 44Questions: 15Answers: 1
    edited February 2022

    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?

  • ChromChrom Posts: 44Questions: 15Answers: 1

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

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    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

  • ChromChrom Posts: 44Questions: 15Answers: 1
    edited February 2022

    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?

  • ChromChrom Posts: 44Questions: 15Answers: 1
    edited February 2022

    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

  • ChromChrom Posts: 44Questions: 15Answers: 1

    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,
    
  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    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

  • ChromChrom Posts: 44Questions: 15Answers: 1
    edited February 2022

    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?

  • ChromChrom Posts: 44Questions: 15Answers: 1

    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?

  • ChromChrom Posts: 44Questions: 15Answers: 1

    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???

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735
    edited February 2022

    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

  • ChromChrom Posts: 44Questions: 15Answers: 1
    edited February 2022

    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?)

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735
    edited February 2022

    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 :smile:

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

    Kevin

  • ChromChrom Posts: 44Questions: 15Answers: 1

    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....

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • ChromChrom Posts: 44Questions: 15Answers: 1

    thank you!

Sign In or Register to comment.