DataTable JS插入问题

Question

We have used DataTable.js for binding the grid. We have around thousands of records so initially we are binding 500 records afterwards we are inserting them one by one. But screen is frozen while inserting one by one. We have written JavaScript code for inserting it one by one.

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

First of all, set deferRender to true in your dataTable initialisation. This will prevent dataTables from executing some of the slow DOM operations while they are not needed. Also please skip the draw() after each add() , this is totally redundant.

To prevent blocking of your page / other scripts you could insert the rows using an interval . I understand that you just want to insert the remaining rows in the background silently. Using an interval will give other threads space for processing while the rows is inserted. Example :

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) 

After that you can draw() the table, if that for some reason is needed or necessary at all.