jQuery DataTables大資料非同步二次載入渲染及initComplete事件bug
阿新 • • 發佈:2019-02-04
我們在使用dataTables進行資料統計時,不可避免的會碰到對大資料的統計。當進行伺服器端大資料讀取時,毫無疑問的會佔用大量載入時間,拖慢頁面載入速度。為優化頁面載入速度問題,我們便要在將請求中最耗時的部分在頁面載入完成之後,進行二次載入,渲染入資料。
之前我採用的是重新發起dataTables渲染事件,來進行二次載入。如下:
<script type="javascript/text">
var datat = $('.dataTables-example').DataTable({
//初始化資訊。。。 此處省略,請參看之前博文
});
datat.on('draw.dt' ,function() {
datat1.column(7, { //7是需要渲染的列
search: 'applied',
order: 'applied'
}).nodes().each(function(cell, i) {
$.get(url,{id:i},function(res){ //引數可以有其他獲取方式
cell.innerHTML = res.data; //向單元格中寫入資料
});
});
}).draw();
</script>
這種方法的缺點是會發起2次dataTables請求,影響載入速度。而利用dataTables自帶的”DrawCallback”渲染事件引數。
<script type="javascript/text">
var datat = $('.dataTables-example').DataTable({
//其他初始化資訊。。。
"drawCallback":function(s){
datat.column(7).nodes().each(function(cell,i){
$.get("__URL__/getClicknum" ,{id:i},function(res){
cell.innerHTML = res.data;
});
});
},
});
</script>
這樣就可以避免重複請求,完成二次載入。
注意:不能使用”initComplete”載入完成事件,其在翻頁時會失效。