在数据表中呈现的性能问题

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

Answer 1

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 , eg, 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.