加載數據表而不阻塞主線程

Question

我目前正在建設一個小型的網頁，其中包括一個數據表與目前約為10.000條目。 我的問題是，填充數據表會阻塞主線程幾秒鍾，這會導致網頁在相當長的時間內沒有響應。 有沒有辦法通過異步填充數據表來解決此問題？

初始化工作如下：

$(document).ready(function () {
    // load all kinds of other charts/data
    // ...        
    loadDataTable();
});  

function loadDataTable(){
    $.ajax({
      type: "GET",
      url: /* url to make an API call to the node backend */,
      dataType: "json",
      success: function(response) {
        initDataTable(response)
      }
    });
}


function initDataTable(data){
    $(/*id of the data table*/). DataTable({
        sScrollX: "100%",
        data: data.data,
        columns: [
            { data: /* data selection */ },
            { data: /* data selection */ },
            { data: /* data selection */ },
            { data: /* data selection */ },
            { data: /* data selection */ }
        ]
    });
}

完整的源代碼： https : //github.com/fbaierl/bundeszirkus-server/blob/master/public/index.html

編輯 ：此鏈接為我提供了正確的解決方案： https : //datatables.net/examples/server_side/simple.html （感謝Valentin Silvestre）

Answer 1

該鏈接表示10k數據加載不多，可能來自您的API調用或錯誤的代碼。

文檔中的此頁面提供了其他說明，以使用AJAX填充數據庫。 我認為這可以解決您的問題。

$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "../server_side/scripts/server_processing.php"
    } );
} );

該表通過Ajax加載數據。 下面顯示了已加載的最新數據。 加載任何其他數據后，此數據將自動更新。