Slow page load for Datatable page
Slow page load for Datatable page
We have an html page with Datatable. Total entries in the Datatable are 439 currently(and growing), split across 9 pages(pagination) of 50 rows each. Whenever we load this page, it takes at least 6-7 seconds to load the page, which is a lot considering that at any point, max. people visiting this page would be only 8.
Each row contains 2 buttons and plain text fields.
Here is what the jquery code looks like for out datatable:
$('.datatable').dataTable( {
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"iDisplayLength": 50,
"bStateSave": true,
"aLengthMenu": [[20, 50, 100, 300, -1], [20, 50, 100, 300, "All"]],
"fnStateSave": function (oSettings, oData){
localStorage.setItem('reps', JSON.stringify(oData));
},
"fnStateLoad": function (oSettings){
var data = localStorage.getItem('reps');
return JSON.parse(data);
},
"oLanguage": {
"sLengthMenu": "MENU records per page",
"sSearch": "Filter:"
},
"aoColumnDefs": [{"bSortable": false, "aTargets": ["nosort"]},
{"sWidth": "5em", "aTargets": ["col1width"]},
{"sWidth": "30em", "aTargets": ["col2width"]}],
"aaSorting": [[1, "asc"]],
"scrollx" : "100%"
} );
Is there a way to speed this up? Waiting for 5-6 secs everytime the page is accessed does indeed seem like slow performance for only 439 rows. These rows do not contain any images themselves.
I am wondering if we can do the pagination "on demand" i.e. load the rows for the other pages only when a user clicks on that page number. Is that possible? How would filtering work in this case?
Answers
That seems very slow to me. Can you link to the page so we can take a look and debug it please.
You are describing server-side processing.
Allan