CODEWITHSUNDEEP
jquerydatatables
ram2013
ram2013

Reputation: 505

Performance issues with rendering in datatables

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
};

Upvotes: 5

Views: 19436

Answers (1)

Bumptious Q Bangwhistle
Bumptious Q Bangwhistle

Reputation: 4759

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.

Upvotes: 13

Related Questions