datatables服务端分页配置

datatables服务端分页配置

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

一、必备

  1. 引入

    1
    2
    3
    4
    5
    6
    <!--引入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. 主体

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <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代码

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

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

二、分页

  1. 代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    <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手动刷新方法

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

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

Compartir