datatables服务端分页配置最新教程2018

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>

  2. 讲解

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

  3. 注意部分

    datatables手动刷新方法

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

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

相关文章
相关标签/搜索