javascript - DataTable JS 插入问题

Question

我们使用DataTable.js来绑定(bind)网格。我们有大约数千条记录，因此最初我们绑定(bind) 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);
        }
      })
  });
}

Answer 1

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

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

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()表格。