Проблема с вставкой JTT DataTable

Question

Мы использовали 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); 
     } 
     }) 
    }); 
} 

Answer 1

Прежде всего, установите deferRender в true в вашем DataTable инициализации. Это предотвратит выполнение DataTables некоторых медленных операций DOM, пока они не нужны. Также пропустите draw() после каждого add(), это полностью избыточно.

Во избежание блокировки страницы/других скриптов вы можете вставлять строки, используя 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() таблицу, если по какой-то причине необходимо или нужно вообще.