Slow rendering with Datatable.

jerry98225

Hi guys, I am trying to display a large amount of the data with datatabel (7000+ rows). The datatable itself is great. I love the functions and features. However, the page took 30+ sec to render. After the benchmark test, I suspect that the datatable default pagination feature is the reason that causes the problem. I don't want to disable it since it works so great. I was wondering if anyone has encountered the same issue before. Thanks for the help. :D

allan

First thing to do would be to update to the latest 1.9 beta if you haven't already as this has a number of performance improvements. The next thing is, what browser is it that is suffering this badly? Is it IE and the table is in a display:none element? IE dome something very odd that takes a huge amount of time under that condition.

What is your data source for the table? DOM, Ajax?

Allan

jerry98225

Thank you for your reply Allan. This happens on Chrome, FireFox and IE. The data source is from mysql via php script and display the data with foreach loop to create a big table . I will update to 1.9 and post the result later. Thank you again.

allan

If you are able to give us a link to the page it would be interesting to profile it - however, you might want to consider switching over to using Ajax source loading of data with deferred rendering: http://datatables.net/release-datatables/examples/ajax/defer_render.html . That will save time overall, the disadvantage is that it means Javascript must be enabled for the table data to be seen (however, 1.9 has some great accessibility enhancements if that is of concern).

Allan

jerry98225

Version 1.9 does improve the speed. I think I am happy with the performance. Thanks a lot Allan.

cragstar

Hi Allan
I'm having this issue too now and 1.9 does nothing to solve it.

Not so long ago it would take a few seconds to run a table, but now anything with 3000+ rows drags.
My data is being returned in 2-3 secs (less than 0.0011 per 3 rows).
I can see the data appearing on screen very quickly. But when its being rendered by your script with the bells and whistles it can take up to 30secs.

I'm really not sure what has happened, and I've run all kinds of profiles, page speed tests (getting 98/100) e.t.c. It's purely the rendering. And as it's an intranet i can't give you a copy.

All i can say is upto about 3000 records it takes 2-3 seconds. after that can be 30-60 seconds

cragstar

Don't know if this helps
js/jquery-1.7.1.min.js line 2 (2 minutes 26 seconds)

Says something in line 2 of jquery minified is taking 2mins and 26 secs.
i removed all other scripts from the page aside from
jQuery
Datatables.js
tabletools.js

So something in line 2 is being called (I used the minified version of jquery from jquery.com) and causing this issue.
Might help you, as I don't know what you're calling in, in the main jQuery pot

mattclements

You really need to use an Ajax source to load 3000+ rows, the lagging will be with your browser initially downloading the HTML file with all 3000 records, before DataTables can then limit this down to the initial 25 records.

Using JSON this can use DB queries to limit the return from the database to the first 25 records which are downloaded & rendered on the fly.

Regards,
Matt

allan

Try using the unminified jQuery. The min one is only a few lines long so lime 2 doesn't narrow it down too much! A link to the page would be useful as well or at least a debug trace.

Allan

cragstar

I need all 3000 rows at once though!
And as of a few weeks ago it would load in seconds. Plus as i stated the data from server to browser is taking 2-3seconds.

I'll do a full jQuery and report back

allan

What changed in the last few weeks then? What's you data source, do you have deferred rendering enabled, any fnRender actions? A debug trace would be useful.

Allan

cragstar

It won't post my comments due to scripts i think!!
No renderer options . . . and nothing has changed other than updating datatables!!
I've fulltext indexed my database to save some seconds.

cragstar

"oLanguage": {
"sSearch": "Search:",
},
"bJQueryUI": false,
"bSortClasses": false,
"aaSorting": [[1,'asc']],
"bInfo": true,
"bScrollInfinite": true,
"bScrollCollapse": true,
"sScrollY": "350px",

"iDisplayLength": 15,

"sDom": '<"H"Tfr>t<"F"ip>',
"oTableTools": {
"sSwfPath": base_url2 + 'swf/copy_cvs_xls_pdf.swf',
"aButtons": [
{
"sExtends": "pdf",
"sPdfOrientation": "landscape",
"sPdfMessage": "Barhale Training Centre"
},
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": [ "csv", "xls", "copy" ]
}
]
}

cragstar

reflows -
http:///js/jquery-1.7.1.min.js (3 reflows)
The following JavaScript call stack caused a reflow that took 380 milliseconds: ba @ http:///js/jquery.dataTables.min.js:79:105 $ @ http:///js/jquery.dataTables.min.js:58:192 j @ http:///js/jquery.dataTables.min.js:127:128 jQuery.extend.each @ http:///js/jquery-1.7.1.min.js:658:20 jQuery.fn.jQuery.each @ http:///js/jquery-1.7.1.min.js:271:17
The following JavaScript call stack caused a reflow that took 350 milliseconds: @ http:///js/jquery-1.7.1.min.js:1487:84 @ http:///js/jquery-1.7.1.min.js:1615:3 @ http:///js/jquery-1.7.1.min.js:9266:3
The following JavaScript call stack caused a reflow that took 1 milliseconds: jQuery.each.jQuery.cssHooks.(anonymous function).get @ http:///js/jquery-1.7.1.min.js:6615:14 jQuery.extend.css @ http:///js/jquery-1.7.1.min.js:6578:48 jQuery.each.jQuery.fn.(anonymous function) @ http:///js/jquery-1.7.1.min.js:9191:23 a.ui.version.a.each.a.fn.(anonymous function) @ http:///js/jquery-ui-1.8.11.custom.min.js:9:2844 Ja @ http:///js/jquery.dataTables.min.js:70:341
http:///js/TableTools.js (1 reflows)
The following JavaScript call stack caused a reflow that took 14 milliseconds: ZeroClipboard.getDOMObjectPosition @ http:///js/TableTools.js:4:251 ZeroClipboard.Client.glue @ http:///js/TableTools.js:6:312 TableTools._fnFlashGlue @ http:///js/TableTools.js:54:58 TableTools._fnFlashGlue @ http:///js/TableTools.js:54:376

Long running scripts -
jquery-1.7.1.min.js line 921 (31 seconds 20 milliseconds)
jquery-1.7.1.min.js line 1 (14 seconds 254 milliseconds)