Improve Datatables loading time.
Improve Datatables loading time.
oms02
Posts: 11Questions: 3Answers: 0
Link to test case: I can't provide a link to test it since it's a internal link.
Debugger code (debug.datatables.net): Datatables debugger doesn't not seem to show any error or problem
Error messages shown: No error show. Performance problem.
Description of problem:
Hello everyone.
I am having problems with the load time of a table with 20,000 records.
I am pretty sure the problem is not on the server side. The page displays and renders fairly quickly, but when it comes to loading the data into the table, it takes just under a minute (about 50 seconds).
Once the data is displayed in the DOM, I notice that all the data is displayed without paging (making a very long scroll) and until Datatables loads all the data (at which point both the find input box and paging are displayed, making the scroll much smaller), is where the 50 seconds pass.
I have tried to modify the options orderClasses, scrollX and scrollY (from the help: https://datatables.net/faqs/index#speed), without any success.
The code is as follows:
var products_table = $('#products-table').DataTable({
language: {
url: "{{ asset('js/datatables-spanish.json') }}"
},
order: [],
columnDefs: [
{ targets: "text-right", class: 'text-end'},
{ targets: "formatted-number", type: 'formatted-number'},
{ targets: 'ignore-text-thousands-separator', type: 'ignore-text-thousands-separator'},
],
columns : [
{data: 'No'},
{data: 'Description'},
{data: 'Item_Category_Code'},
{
data: 'formatted_price',
render: function(data, type, full, meta){
return data + ' €';
},
},
{
data: 'discount',
render: function(data, type, full, meta){
return data + ' %';
},
},
{data: 'formatted_inventory'},
],
});
I have also tried removing the "render" property when rendering the columns without getting any improvement in the result.
I don't really know what I could do to reduce the loading time. Maybe the main problem is that I've to show all the records from the beginning. I mean, I can't use ajax requests in order to show only some records.
Please, could you help me with this?
Any additional information you need, I'll be pleased to provide it.
Thank you very much in advance.
This question has an accepted answers - jump to answer
Answers
Without being able to use
ajaxand optionally server side processing to load the data you will see the full, unformatted table in the DOM. You could hide the table then display it, ininitCompletedisplay the hidden table. Not sure if it will load faster but at least the user won't see the loading process. Something like this example but put the code to show the table ininitComplete.Kevin
Thanks for your reply Kevin.
I'm not really too concerned about the fact that all the records are seen during the load (I had said that to imply that the part where it slows down is on the client side) but what really worries me is the time until the table is loaded and its functionalities are available.
The problem is that once the 20,000 rows are rendered into the DOM then Datatables needs to process the 20,000 rows to build its data cache and setup the table. So it will be slow. To improve the speed you will need to use
ajaxwithdeferRenderor probably server side processing to handle paging of the table.Kevin
Noted.
Thanks a lot for your help Kevin.
Have a nice week!