Performance issues with rendering in datatables

Question

I am trying to render around 2500 rows with sorting disabled and "bDeferRender": true. It's taking around 40s in chrome(v27). I am using Datatables 1.9 and jquery 2. Any suggestions?

Datatable settings for my datatable:

var oSettings = {
    'bDestroy': true,
    "bInfo": true,
    "bProcessing": true,
    "bDeferRender": true,
    'iDisplayLength': 10,
    'sPaginationType': 'full_numbers',
    'sDom': '<"top"i> T<"clear">lfrtip',
    'sPageButtonActive': "paginate_active",
    'sPageButtonStaticDisabled': "paginate_button",
    "oLanguage": {
        "sSearch": "Futher Filter Search results:",
        "sInfo": "Got a total of _TOTAL_ results to show (_START_ to _END_)",
        "sLengthMenu": 'Show <select>' +
                '<option value="5">5</option>' +
                '<option value="10">10</option>' +
                '<option value="15">15</option>' +
                '<option value="20">20</option>' +
                '<option value="25">25</option>' +
                '</select> results'
    },
    "bSort": false
};

Are you sure the problem is with the JavaScript and not with the network? See how fast your content gets delivered by opening the developer tools, going to the Network tab, then reloading the page. This will show you if any of your requests are taking a super long time. If not, then you're right, it's probably the JavaScript. In that case, you should paginate the table rows and deliver the pages separately with Ajax — Nathan Wallace
– Nathan Wallace, Commented Jun 4, 2013 at 17:28
@NathanWallace the datatable is not created on page load. It is created after user's action like button click. I am calculating the time for datatable creation/rendering using javascript functions and I can see the duration for datatable creation is around 35-40 sec. — ram2013
– ram2013, Commented Jun 4, 2013 at 18:18

johnnyRose · Accepted Answer · 2017-12-01 23:01:49Z

13

Quick guess: you are using fnAddData like this oTable.fnAddData(cells), once for each row. This will cause the DataTable to redraw after each addition. Add a second parameter, false, e.g., oTable.fnAddData(cells,false). Then after your loop, call oTable.fnDraw(). This will redraw only once instead of 2500 times.

See this fiddle: http://jsfiddle.net/V2Kdz/

Click the "Populate" button to populate the table.

Line 12 is:

var ai = t.fnAddData(cells,false);

With the redraw parameter false, the table draws in under one second (on my mid-2011 Mac Air). If you set the redraw parameter to true (or remove it, as the default is true), it takes over one minute.

edited Dec 1, 2017 at 23:01

johnnyRose

7,53017 gold badges43 silver badges61 bronze badges

answered Jun 5, 2013 at 12:16

Bumptious Q Bangwhistle

4,7592 gold badges36 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ram2013 Over a year ago

Thank you. fnAddData works great. I am able to load tree within a sec or two.

Dan Nissenbaum Over a year ago

Home run for me! After a while trying to figure out if it was even possible to optimize my ~3000 row datatable, this did the trick. Load time decreased instantly from ~3 minutes to ~3 seconds. (WHY doesn't the bDeferRender flag work? Come to think of it, it's because after each row is added, there's no way for the DataTable to know you are going to add more.)

Collectives™ on Stack Overflow

Performance issues with rendering in datatables

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related