爲什麼jQuery DataTable（）花費很長時間來填充10,000條記錄？

我正在Jquery DataTable（）庫中工作，但有一件事我發現如果數據數組超過10,000，需要很長時間才能填充。爲什麼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(); 
});

所以在上面的代碼火力將回到10000左右的學生記錄，我在表視圖填充但隨着數據數組大小超過10,000它需要大量的時間來填充。

請通過我的文章，讓我知道你是否有任何解決方案。

感謝

來源

2016-10-31 My Chat

你可能想要使用服務器端處理 - 看看這個（https://medium.com/how-to-firebase/firebase-data-structures-pagination-96c16ffdb5ca#.gp4ghyin9）文章和鏈接特別是（https://github.com/deltaepsilon/firebase-paginator）。看看這個（https://datatables.net/manual/server-side）可能會看到你是對的。 – annoyingmouse

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筆記錄不算少量。考慮分頁數據。

來源

2016-10-31 06:51:19

對於大型數據集，您應該使用ajax加載的數據表。你會查詢一定的數量，如10 - 100數據&將在短時間內執行。你可以檢查這個links我已經加入了加入&聯合與數據表查詢。

來源

2016-10-31 08:21:20 Jobayer

爲什麼jQuery DataTable（）花費很長時間來填充10,000條記錄？

回答

相關問題