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对数据进行处理。

    

50000+
5万行代码练就真实本领
17年
创办于2008年老牌培训机构
1000+
合作企业
98%
就业率

联系我们

电话咨询

0532-85025005

扫码添加微信