DataTables.net takes very long time to load page

DataTables.net takes very long time to load page

Richi_Ace_CrRichi_Ace_Cr Posts: 2Questions: 0Answers: 0

Hello everyone!
I created a web app in Google Apps Script that aims to show a table containing about 20,000 rows. In the Google sheet the total of the columns is 38, but in the webapp I show "only" 23 columns. I do the construction of the HTML table via javascript and at the end I call the DataTables.net command to add pagination and "search" functionalities. Unfortunately, this command takes almost 2 minutes to complete and very often times out. As the number of rows to show increases, performance deteriorates further making the web app unusable. I am not very expert with the commands of Datatables.net and it is for this reason that I do the construction of the table "independently" with javascript. Furthermore, each single row can have different characteristics than the others, in addition to the fact that a couple of columns are needed but are hidden.
I kindly ask if anyone can help me understand where the bottleneck is and what can I do to speed it up?

Actually this is the portion of code in javascript.html file that calls DataTables.net command:

//.....construction of the table....

$('#tbimamac').DataTable( {
"info": false,
"ordering": false,
"orderClasses": false
} );

Thank you very much!

Replies

  • allanallan Posts: 61,446Questions: 1Answers: 10,055 Site admin

    20k rows is going to take a while to download. Also, I would suggest Ajax loading that amount of data and using the deferRender option. Beyond that, please link to a test case showing the problem, per the forum rules, so we can profile it and offer some help.

    Allan

  • Richi_Ace_CrRichi_Ace_Cr Posts: 2Questions: 0Answers: 0

    Hi!
    please can you tell me what you mean by posting a test case? Unfortunately I work in the banking area and I cannot show the data contained in the web app. Or do you mean something else?
    Can you tell me how to implement the ajax loading you mentioned?

    Thank you!

  • kthorngrenkthorngren Posts: 20,145Questions: 26Answers: 4,736

    Can you tell me how to implement the ajax loading you mentioned?

    Use the ajax option as described in this doc instead of constructing the HTML yourself.

    Yesterday someone asked another question about using Google Sheets. They fetch the Google Sheet data using Papa Parse then populate Datatables with data. I wonder if that would help speed up the process. See this thread.

    Kevin

Sign In or Register to comment.