Question

我正在研究Jquery DataTable（）库，但我发现如果数据数组超过10,000则需要很长时间才能填充。

 var newTable = '';
 var ref = firebase.database().ref("Students/");

 ref.on('child_added', function(snapshot) {
    snapshot.forEach(function(data) {

        var usn = data.val().usn;
        var name = data.val().studentName;
        var colname = data.val().collegeName;
        var branch = data.val().branch;
        var batch = data.val().batch;   

        newTable+='<tr data-value='+studentUsn+' id='+studentUsn+' class="home_list_bar">';
        newTable+='<td id="student '+studentUsn+'" class="home_list_border"><span id="studentid" class="home_list_item">'+studentUsn+'</span></td>';
        newTable+='<td class="home_list_border"><span id="studentname" class="home_list_item">'+studentName+'</span></td>';
        newTable+='<td class="home_list_border"><span id="branchname" class="home_list_item">'+studentBranch+'</span></td>';
        newTable+='<td class="home_list_border"><span id="branchname" class="home_list_item">'+studentBatch+'</span></td>';
        newTable+='</tr>';
        document.getElementById('tableDiv').innerHTML=newTable;
    });
    $('#user_table').DataTable().draw();
 });

因此在上面的代码中，firebase将返回大约10,000个学生记录，并且我在表视图中填充，但由于数据数组大小超过10,000，因此需要花费大量时间来填充。

如果您有任何解决方案，请通过我的帖子告诉我。

由于

Answer 1

每个记录都会调用

child_added事件，所以在你的情况下，它将被调用10000次，10000你调用监听器中的代码效率不高。就你可以做得更好而言，这并不好。我建议将此更改为once或value事件，具体取决于您的喜好（阅读更多here）。

ref.on('once', function(snapshot) {
  snapshot.forEach(function(data) {

    var usn = data.val().usn;
    var name = data.val().studentName;
    var colname = data.val().collegeName;
    var branch = data.val().branch;
    var batch = data.val().batch;   

    newTable+='<tr data-value='+studentUsn+' id='+studentUsn+' class="home_list_bar">';
    newTable+='<td id="student '+studentUsn+'" class="home_list_border"><span id="studentid" class="home_list_item">'+studentUsn+'</span></td>';
    newTable+='<td class="home_list_border"><span id="studentname" class="home_list_item">'+studentName+'</span></td>';
    newTable+='<td class="home_list_border"><span id="branchname" class="home_list_item">'+studentBranch+'</span></td>';
    newTable+='<td class="home_list_border"><span id="branchname" class="home_list_item">'+studentBatch+'</span></td>';
    newTable+='</tr>';
    document.getElementById('tableDiv').innerHTML=newTable;
  });
  $('#user_table').DataTable().draw();
});

这样效率更高。但无论如何10000记录量不小。考虑对数据进行分页。

Answer 2

对于大型数据集，您应该使用ajax加载的数据表。您将查询某些数量，如10 - 100数据和将在短时间内执行它。您可以查看此links我已添加加入＆amp;的位置与数据表查询联合。

为什么jquery DataTable（）花费很长时间来填充10,000条记录？

2 个答案: