在数据表中渲染的性能问题 [英] Performance issues with rendering in datatables

问题描述

我试图渲染大约2500行，排序禁用，bDeferRender：true。而在铬（v27）中大概需要40多年的时间。我正在使用Datatables 1.9和jquery 2.对于我的datatable，任何sugestions？

datatable 设置

  var oSettings = {
'bDestroy'：true，
bInfo：true，
bProcessing ：true，
bDeferRender：true，
'iDisplayLength'：10，
'sPaginationType'：'full_numbers'，
'sDom'：'&我> T清除> lfrtip'，
'sPageButtonActive'：paginate_active，
'sPageButtonStaticDisabled'：paginate_button，
oLanguage：{
sSearch ：另外过滤搜索结果：，
sInfo：总共显示_TOTAL_结果（_START_到_END_），
sLengthMenu：'显示< select>'+ 
'< option value =5> 5< / option>'+ 
'< option value =10> 10< / option>'+ 
'选项值=15> 15< / option>'+ 
'< option value =20> 20< / option>'+ 
'< option value =25 > 25< / option>'+ 
'< / select>结果'
}，
bSort：false 
 
}; 
  

解决方案

快速猜测：你正在使用像这样的fnAddData oTable.fnAddData（cells），每行一次。这将导致DataTable在每次添加后重绘。添加第二个参数 false ，例如 oTable.fnAddData（cells，false）。然后循环后，调用 oTable.fnDraw（）。这将仅重绘一次而不是2500次。

看到这个小提琴： http：// jsfiddle.net/V2Kdz/

点击填充按钮填充表格。

  var ai = t.fnAddData（cells，false）; 
  

如果redraw参数为false，则表格会在一秒之内吸引（在2011年中期的Mac Air ）。如果将redraw参数设置为true（或将其删除，默认为true），则需要一分钟。

希望这有帮助。

bqb

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

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

    };

解决方案

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.

Hope this helps.

bqb

这篇关于在数据表中渲染的性能问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！