datatables服务端分页配置

datatables可以说是个好东西吧，几行js代码就能够让你初始化一个表格，很方便，但是要用好还是很困难的，因为配置太多太多了，网上的大多数是一些陈旧的配置，如果datatables更换了这么多版本，网上很多配置都有一些问题，我这里也不是datatables的基础教程，我这里就谈一下服务端分页怎么配置，因为我项目中用到了，笔以记之。后之览者，亦将有感于斯文~

一、必备

1. 引入

   <!--引入css-->
   <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"><!--引入JavaScript-->
   <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
   <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

2. 主体

   <table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th>Name</th><th>Position</th><th>Office</th><th>Age</th><th>Start date</th><th>Salary</th></tr></thead><tfoot><tr><th>Name</th><th>Position</th><th>Office</th><th>Age</th><th>Start date</th><th>Salary</th></tr></tfoot><tbody><tr><td>Tiger Nixon</td><td>System Architect</td><td>Edinburgh</td><td>61</td><td>2011/04/25</td><td>$320,800</td></tr></tbody>
   </table>

3. js代码

   $(document).ready(function() {$('#example').DataTable();
   } );

   有这三个部分文件放到一个html中，你就可以实例化一个表格了，很容易对吧

二、分页

1. 代码

   <script type="text/javascript">var myTable;$(document).ready(function() {myTable = $('#projectTable').DataTable( {"processing": true,//刷新的那个对话框"serverSide": true,//服务器端获取数据"paging": true,//开启分页lengthMenu: [ //自定义分页长度[ 20, 50, 100 ],[ '20 页', '50 页', '100页' ]],ordering:false,"ajax": {"url": "/api/get_project_list","type": "POST","data": function (d) {//删除多余请求参数for(var key in d){if(key.indexOf("columns")==0||key.indexOf("order")==0||key.indexOf("search")==0){ //以columns开头的参数删除delete d[key];}}var searchParams= {"retryType":$("#retryType").val(),"departmentCode":$("#departmentCode").val()!=""?$("#departmentCode").val():null,"projectCode":$("#projectCode").val()!=""?$("#projectCode").val():null,"serviceName":$("#serviceName").val()!=""?$("#serviceName").val():null,"csrfmiddlewaretoken":csrftoken};//附加查询参数if(searchParams){$.extend(d,searchParams); //给d扩展参数}},"dataType" : "json","dataFilter": function (json) {//json是服务器端返回的数据json = JSON.parse(json);var returnData = {};returnData.draw = json.data.draw;returnData.recordsTotal = json.data.total;//返回数据全部记录returnData.recordsFiltered = json.data.total;//后台不实现过滤功能，每次查询均视作全部结果returnData.data = json.data.retryProjectList;//返回的数据列表return JSON.stringify(returnData);//这几个参数都是datatable需要的，必须要}},"searching" : false,"columns": [{ "data": "id" },{ "data": "departmentCode" },{ "data": "projectCode" },{ "data": "serviceName" },{ "data": "alertMail" },{ "data": "callbackUrl" },{ "data": "descInfo" },{ "data": "companyId" },{ "data": "retryType" },{ "data": "retryCircle" },{ "data": "createTime" },{ "data": "updateTime" },{ "data": "createUser" },{ "data": "updateUser","defaultContent": ''},{ "data": "validVal" },{ "data": "retryTimes" }],"oLanguage" : { // 国际化配置"sProcessing" : "正在获取数据，请稍后...","sLengthMenu" : "显示 _MENU_ 条","sZeroRecords" : "没有找到数据","sInfo" : "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条","sInfoEmpty" : "记录数为0","sInfoFiltered" : "(全部记录数 _MAX_ 条)","sInfoPostFix" : "","sSearch" : "查询","sUrl" : "","oPaginate" : {"sFirst" : "第一页","sPrevious" : "上一页","sNext" : "下一页","sLast" : "最后一页"}}});});
   </script>

   ​给表格加上自定义列：

      {data: function (data, type, full) {return "<button class=\'btn btn-warning btn-xs\' onclick='updateMyForm("+JSON.stringify(data)+")'>修改</button>  <button class=\'btn-xs btn btn-warning\'>详情</button>";},className: "center",defaultContent: '<button class=\'btn btn-warning btn-xs\' onclick="updateMyForm()">修改</button>  <button class=\'btn-xs btn btn-warning\'>详情</button>'}

2. 讲解

   大家按照我这个配置去配置基本可以完成datatables服务端分页配置，重点需要讲解的是dataFilter这个配置必须要，必须要，必须要，服务端分页要求我们传递draw，recordsTotal，recordsFiltered，data 这几个字段，请不要写错字母，不然分页就拜拜了，dataFilter 能够帮你解决这个问题，因为你不能总要求服务端有这几个字段吧

3. 注意部分

   datatables手动刷新方法

   myTable.ajax.reload(); //myTable是上面我实例化的对象

三、JAVA代码

评论里有小伙伴提到了java里面怎么对应，我简单给些demo
其中请求必须要有这三个参数

    private Integer draw;private Integer length;private Integer start;

返回必须要有这两个参数

    private Long total;private Integer draw;

外层用data包装，所以我模板里面的代码是data.total data.draw，请往上看
获取列表的分页代码

    Page<Role> carList = PageHelper.offsetPage(req.getStart(), req.getLength()).doSelectPage(() -> roleDao.getRoleByCondition(req));List<RoleBo> roleBos = new ArrayList<>();for (Role role : carList) {RoleBo roleBo = new RoleBo();BeanUtils.copyProperties(role,roleBo);roleBos.add(roleBo);}roleListResp.setDraw(req.getDraw());roleListResp.setTotal(carList.getTotal());roleListResp.setRoleList(roleBos);

可以看出是用pageHelper的offsetPage做的。不懂的留言或者加群

Over，也是给自己做个笔记吧~