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

