jQuery datatables plugin too slow - need a replacement

Question

I've been using jQuery datatables plugin for about two years now and it worked great so far. The problem occured now when I need to load about 45000 records at once (you click the button and wait for the page with the data to load) - the loading time is just too big to wait.

Here are the tests I made using Chrome web browser (the data is from it's Network tab using ):

datatables plugin turned on:
5476 records:
24 requests ❘ 256.26KB transferred ❘ 19.80s
(onload: 19.80s, DOMContentLoaded: 18.58s)
45071 records:
34 requests ❘ 1.85MB transferred ❘ 11.1min
(onload: 11.1min, DOMContentLoaded: 11.0min)

datatables plugin turned off (the jQuery datatables initialization is comented out):
5476 records:
21 requests ❘ 255.84KB transferred ❘ 6.57s
(onload: 13.26s, DOMContentLoaded: 13.28s)

45071 records:
31 requests ❘ 1.84MB transferred ❘ 2.0min
(onload: 2.0min, DOMContentLoaded: 2.0min)

The increase in load time that datatables make is over 80% for the 45k rows, and almost 40% for the 5k rows.

So I was wondering if you guys know of any similar plugin that handles alot of rows (45000+) faster, or am I just missing the point by trying to load all 45000+ records in "one go"?

Any suggestions are appreciated!

Answer 1

From the DataTables FAQs ( http://datatables.net/faqs#speed ):

• Client-side processing - DOM sourced data: ~5'000 rows. Speed options: bSortClasses
• Client-side processing - Ajax sourced data: ~50'000 rows. Speed options: bDeferRender
• Server-side processing: millions of rows.

If you aren't using deferred rendering at the moment, with your 45'000 rows, I would most certainly suggest that. Failing that, for DataTables options, you might need to look at server-side processing.

Answer 2

The answer by Allan is good; but one other thing to mention (which greatly effects the loading time) is setting bProcessing and bServerSide to true as shown in the code below:

$(document).ready(function() {
    $('#example').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "../examples_support/server_processing.php"
    } );
} );

Ref. http://datatables.net/examples/data_sources/server_side.html

My code was taking 15 seconds to load, now it takes like 1 second :)