15

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!

6
  • 4
    I'd say you're missing the point, 45000 rows is a huge dataset to handle in a browser. Maybe you should be looking at loading smaller views of the data and paginating
    – GordonM
    Jul 25, 2012 at 9:15
  • Is there any reason you need to load that many records at once? That'll slow down pretty much anything... Jul 25, 2012 at 9:15
  • i would suggest that the time delay may not be the pulling the data but the dom manipulation. Have you looked at optimising your existing jquery code? Jul 25, 2012 at 9:17
  • @NicholasKing: that was my suspicion too, that's why I made the test which confirm that. For the optimization - I really don't know what more optimization I can do to jQuery datatables call, as I call it simply by $('#example').dataTable({ "bJQueryUI": true, "iDisplayLength": 50 });`
    – Nikola
    Jul 25, 2012 at 9:22
  • do you use server Server side processing ? you can use it with pagination , so eventually at any current time you will work with a small portion of rows in client side....
    – Daniel
    Jul 25, 2012 at 9:25

3 Answers 3

28

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.

4

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

3
  • 1
    bProcessing isn't just and option to show a message while DataTables is loading the data? How could it speed up loading time? Jun 19, 2014 at 15:02
  • It's not the bProcessing that speeds it up; just the bServerSide. Jun 19, 2014 at 16:56
  • Isn't that pretty much what Allan said? Aug 4, 2015 at 1:13
2

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" />
0

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.