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>

1. 主体

   <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>

2. 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>

   ​

2. 讲解

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

3. 注意部分

   datatables手动刷新方法

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

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