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”加载完成事件,其在翻页时会失效。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值