Question

我目前正在建立一个小型网页，其中包括一个datatable，目前大约有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

This链接说10k数据加载不多，可能来自您的API调用或错误的代码。

文档的

This页正在提供其他说明，以使用AJAX填充数据库。我认为这可以解决您的问题。

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

此表通过Ajax加载数据。下面显示了已加载的最新数据。加载任何其他数据后，该数据将自动更新。

加载数据表而不阻塞主线程

1 个答案: