不积跬步,无以至千里;不积小流,无以成江海。

Dean's blog

  • Join Us on Facebook!
  • Follow Us on Twitter!
  • LinkedIn
  • Subcribe to Our RSS Feed

dataTables.js 重新加载数据

在使用dataTables的时候,实现自定义搜索后,请求了新的数据,但列表却没有刷新,百度/Bing了很多解决方法,基本是集中在两种:

   方法 1:

dataTable.ajax.reload().draw();

 

方法 2:

dataTable.fnClearTable();
dataTable.fnDraw();

 

但是我一开始使用的时候,两种方法都不行,而且第二种还会报错。排查原因后,发现,dataTables在调用的时候,如果使用的是:$("").DataTable(...)的时候,方法 1可以,方法 2会报错,如果是使用的$("").dataTable(...)的时候,就刚好反过来。真是有点晕,为什么提供两种方法,然后返回的内容还不同。

我服务器返回的数据格式和dataTables的数据格式不完全一致,在数据返回的时候,需要做格式转换,如下:

dataFilter: function (data) {//格式过滤,必须返回string数据
    var original = JSON.parse(data);
    var dtData = {
        draw: 1,
        recordsTotal: original.property.total_size,
        recordsFiltered: original.property.total_size,
        data: original.list
    };
    if (original.error.err_msg != "") dtData.error = original.error.err_msg;

    return JSON.stringify(dtData);
}

 

这个是jQuery.ajax的处理方案,具体的转换,可以查jQuery API手册。

后来发现,这个draw我是图方便,固定设置了1,而实际上,这个draw是每次都不一样,dataTables的要求是,将draw每样返回的。后来调整成这样:

dataFilter: function (data) {//格式过滤,必须返回string数据
    var original = JSON.parse(data);
    var draw = original.error.request_args.split(',')[0].split('=')[1]
    var dtData = {
        draw: parseInt(draw),
        recordsTotal: original.property.total_size,
        recordsFiltered: original.property.total_size,
        data: original.list
    };
    if (original.error.err_msg != "") dtData.error = original.error.err_msg;

    return JSON.stringify(dtData);
}

 

突然前面提到的两种方法,都可以了。

draw是绘制计数器。这个是用来确保Ajax从服务器返回的是对应的(Ajax是异步的,因此返回的顺序是不确定的)。 要求在服务器接收到此参数后再返回,详细见这里http://datatables.club/manual/server-side.html#returndata

看来,仔细阅读API说明,还是非常有必要的。

 

不允许评论
粤ICP备17049187号-1