DataTable JS 插入问题

【问题标题】：DataTable JS inserting issueDataTable JS 插入问题
【发布时间】：2016-08-17 11:06:11
【问题描述】：

我们使用DataTable.js 来绑定网格。我们有大约数千条记录，因此最初我们绑定了 500 条记录，之后我们将它们一一插入。但是一一插入时屏幕被冻结。我们已经编写了 JavaScript 代码来一一插入。

function bindLoadOverView() {
  $.ajax({
      type: "POST",
      contentType: "application/json; charset=utf-8",
      dataType: 'json',
      url: "../Loads/board.aspx/bindView",
      success: function(data1) {
        var aData = data1.d;
        for (var i = 500; i < aData.length; i++) {
          table.row.add([

            null,
            aData[i].row1,
            aData[i].row2
          ]).draw(false);
        }
      })
  });
}

【问题讨论】：

标签： javascript jquery performance datatables

【解决方案1】：

首先，在数据表初始化中将deferRender 设置为true。这将防止 dataTables 在不需要时执行一些缓慢的 DOM 操作。另外请跳过每个add()之后的draw()，这完全是多余的。

为防止阻止您的页面/其他脚本，您可以使用interval 插入行。我了解您只想在后台静默插入剩余的行。在插入行时，使用间隔将为其他线程提供处理空间。示例：

var index = 500,
    max =  aData.length,
    insert = window.setInterval(function() {

      table.row.add([
         null,
         aData[i].row1,
         aData[i].row2
      ])

      index++
      if (index == max) window.clearInterval(insert)

    }, 20)

之后，您可以draw() 表，如果出于某种原因需要或完全有必要。

【讨论】：