在使用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说明,还是非常有必要的。