CODEWITHSUNDEEP
phpjquerydatatables
Nikola
Nikola

Reputation: 15038

jQuery datatables plugin too slow - need a replacement

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!

Upvotes: 15

Views: 40589

Answers (3)

Peter G.
Peter G.

Reputation: 8034

I found that browser plugins can also slow the performance of the DataTable down, which was in my case. The loading time for the table itself went from about 15s to 2s.

One of them is Skype Toolbar, which automatically parses data in the table, unless you tell it not to.

This is a problem for huge tables. Lot of users have that plugin and it unknowingly slows their loading of large tables.

There is one good solution for this, add this to the header. Every DataTables web page that goes to the public should contain this:

<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />

Upvotes: 1

user1477388
user1477388

Reputation: 21430

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 :)

Upvotes: 4

Allan Jardine
Allan Jardine

Reputation: 5463

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.

Upvotes: 28

Related Questions