Sort Performance
Sort Performance
I am using the 1.7.6 build. With 2,890 entries displayed all in one page, the sort operation takes 3 secs consistently. Is this the expected performance or is there ay way to improve it?
Another issue I found was that when I scroll vertical the column header doesn't get properly aligned with the entries.
- There are 9 columns
- Scroll X and Y enabled
- No Server Side Processing - aaData is fed using a single AJAX call once initially
- Testing in IE9 and FF4
[code]
$('#example').dataTable({
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"sPaginationType": "full_numbers",
"aaData": dtData,
"bJQueryUI": true,
"sScrollY": "200px",
"sScrollX": "100%",
"sScrollXInner": "110%",
"aoColumns": [{ "sClass": "td-nowrap" },
{ "sClass": "td-nowrap" },
{ "sClass": "td-nowrap" },
{ "sClass": "td-nowrap" },
{ "sClass": "td-nowrap" },
{ "sClass": "td-nowrap" },
{ "sClass": "td-nowrap" },
{ "sClass": "td-nowrap" },
{ "sClass": "td-nowrap" }]
});
[/code]
Please let me know if any other information is required?
- Thanks, Karthik.
Another issue I found was that when I scroll vertical the column header doesn't get properly aligned with the entries.
- There are 9 columns
- Scroll X and Y enabled
- No Server Side Processing - aaData is fed using a single AJAX call once initially
- Testing in IE9 and FF4
[code]
$('#example').dataTable({
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"sPaginationType": "full_numbers",
"aaData": dtData,
"bJQueryUI": true,
"sScrollY": "200px",
"sScrollX": "100%",
"sScrollXInner": "110%",
"aoColumns": [{ "sClass": "td-nowrap" },
{ "sClass": "td-nowrap" },
{ "sClass": "td-nowrap" },
{ "sClass": "td-nowrap" },
{ "sClass": "td-nowrap" },
{ "sClass": "td-nowrap" },
{ "sClass": "td-nowrap" },
{ "sClass": "td-nowrap" },
{ "sClass": "td-nowrap" }]
});
[/code]
Please let me know if any other information is required?
- Thanks, Karthik.
This discussion has been closed.
Replies
I'm slightly surprised that IE9 and Firefox 4 take quite so long to do the sort - I would have expected possibly a second for around 3'000 rows in those two browsers. One thing you might try is disabling the sorting classes option (which highlights the current column being sorted), which will speed things up a bit: http://datatables.net/usage/features#bSortClasses . What kind of computer are you using this on?
If that still isn't fast enough, then server-side processing is the way to go, which will scale to millions of rows. Although it does mean you'll need to have a server-side script in place.
With the scrolling issue - if you look at the console in Firebug, or the IE dev tools, there might be a warning from DataTables about the column alignment. I suspect you just need to provide a bit more room for the table to 'grow' into. Try settings sScrollXInner to 150% and see if that improves things. Or, since you've got no-wrapping in your TDs just remove sScrollXInner altogether and let DataTables figure it out.
Btw for interest, you can use aoColumnDefs for your sClass definitions which might make life a little easier (although it won't effect the speed at all):
[code]
$('#example').dataTable({
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"sPaginationType": "full_numbers",
"aaData": dtData,
"bJQueryUI": true,
"sScrollY": "200px",
"sScrollX": "100%",
"sScrollXInner": "110%",
"aoColumnDefs": [{ "sClass": "td-nowrap", "aTargets": ["_all"] }]
});
[/code]
Regards,
Allan
I am using a Core 2 Duo Laptop with 8GB RAM running 64-Bit Windows 7. I don't see any problem there. I'll follow your suggestion and see if I see any improvements.
Thanks for a great plug-in. Hopefully I can build this real world application using this. My requirement is to have close to 5000 rows with at least 40 columns. Started seeing issues at 9 columns. Let's see.
If I use server side processing aaData can only be pointed a HTTP returning a flat file? Or can it point to a variable?
It idea of server-side processing is that you get an SQL engine to do all the sorting / filtering etc - since they are optimised for exactly that. DataTables just requests what it should show for each page: http://datatables.net/examples/data_sources/server_side.html . This will scale to many millions of rows. Another option is to use client-side processing with Ajax sourced data: http://datatables.net/examples/data_sources/ajax.html . However, the DOM still needs to be built on the client-side. There is a discussion here ( http://datatables.net/forums/comments.php?DiscussionID=4739 ) about how the performance of the flat file Ajax sourced data might be improved - but you've still to sort 5'000 rows.
Is server-side processing an option for you, it does sound like it might be the way to go.
Regards,
Allan