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

时间:2018-07-10 14:20:59

标签: javascript node.js datatables

我目前正在建立一个小型网页,其中包括一个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)

1 个答案:

答案 0 :(得分:1)

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

文档的

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

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

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