1. 程式人生 > >jQuery DataTables大資料非同步二次載入渲染及initComplete事件bug

jQuery DataTables大資料非同步二次載入渲染及initComplete事件bug

我們在使用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”載入完成事件,其在翻頁時會失效。