KK集团官方手机版KK集团官方手机版

KK平台备用客服
KK国际备用注册

JQuery的dataTable的数据接收

关于dataTable基本使用有很多帖子说的很详细,在此不做详述。

 

最近使用dataTable处理服务器返回分页数据时遇到问题,问题解决后有一些心得分享一下:

1. 如果打开界面通过dataTable给表格填充数据,必须把dataTable调用放在document.ready方法里面,或者放在$(function(){  。。。 });里面二者等价。

 

2. 最简单的使用,服务器按照dataTable要求的分页结构返回分页信息,dataTable直接解析并使用

1 var list = $("#personList").dataTable({ 2 "searching" : false, 3 "ordering" : false, 4 "bLengthChange": false, 5 "iDisplayLength": 10, 6 "processing": true, 7 "serverSide": true, 8 "sServerMethod": "get", 9 "sAjaxSource" : "/test/listPerson",10 "aoColumns" : [ {11 "mDataProp" : "name"12 }, {13 "mDataProp" : "status"14 },{15 "mDataProp" : "position"16 }, {17 "mDataProp" : "grade"18 }19 ]20 });

 这种情况服务器端返回的数据结构必须是:

1 public class Page{ 2 private int sEcho; 3 private int iTotalRecords; 4 private int iTotalDisplayRecords; 5 private int iDisplayStart; 6 private int iDisplayLength; 7 private String sSearch; 8 private List<Object> aaData = new ArrayList<>(); 9 10 }

前台收到page对象后会解析成dataTable的page对象,取出aaData作为表数据。

 

3. 我们现在服务端基本都是有结构化的返回结构体,如:

   {"retCode":"00000", "retInfo":"Success", "data":{"sEcho":1, "iTotalRecords":12,"iTotalDisplayRecords":10,"iDisplayStart":0,"iDisplayLength":10,"sSearch":null, "aaData":[{"name":"lily","satus":"normal","position":"pm"}]}}

   这种数据结构不能直接传给dataTable处理,无法识别。我们需要通过fnServerData对数据进行处理。

    

list = $("#personList").dataTable({ "searching" : false, "ordering" : false, "bLengthChange": false, "iDisplayLength": 10, "processing": true, "serverSide": true, "sServerMethod": "get", "sAjaxSource" : "/test/person/list", "fnServerData" : function (sSource, aoData, fnCallback) { $.ajax({ "type": "GET", "url": sSource, "dataType": "json", "data": aoData, "success": function (result) { if (result.retCode == "00000") { fnCallback(result.data); } else { alert("Fail to get data!") } } }); }, "aoColumns" : [ { "mDataProp" : "name" }, { "mDataProp" : "status" },{ "mDataProp" : "position" } ] //$_GET["sColumns"]将接收到aoColumns传递数据 });

   

fnServerData主要是在将请求发送到server之前对数据进行处理,在收到server返回后对数据进行处理,方便dataTable填充数据。

"fnServerData" : function (sSource, aoData, fnCallback) 三个参数,sSource会传入dataTable的sAjaxSource,aoData会传入dataTable组织好的要发给server的数据,包括分页信息,如果不把这些数据继承下来发给服务,分页的请求信息会丢失,会导致server收到的分页信息中的iDisplayLength值为0,将aoData传入ajax的data属性以继承传递,fnCallback是dataTable后续处理数据的回调函数,在ajax的success指定的方法中将数据处理(对于我们上面的返回数据结构,从返回结果中取出data作为dataTable的接收数据)后的结果传递给fnCallback方法。

 

 

success

欢迎阅读本文章: 杨金龙

KK体育备用主页

KK平台备用客服