dataTables是一款很强大很好用的前端table 分页插件，地址：dataTables

如何使用大家可以去官网看看教程，此处总结下dataTables结合ajax需要注意的点

一，开始使用

JavaScript代码

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": "数据url",
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
    } );
} );

json数据

{
  "data": [
       {
      "id": "1",
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
      "id": "2",
      "name": "Garrett Winters",
      "position": "Accountant",
      "salary": "$170,750",
      "start_date": "2011/07/25",
      "office": "Tokyo",
      "extn": "8422"
    },
  ]
}

数据格式必须一致，data作为key，值为数组对象，获取对象属性值能够直接使用data.属性名来调用获取。

如果不能使用data.属性名来直接调用获取值则需要使用dataSrc来动态指向数据源。

JavaScript代码

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": "数据url",
        "dataSrc": "data.records",
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
    } );
} );

json数据

 "data": {
      "records": [
           {
                 "id": "1",
                  "name": "Tiger Nixon",
                  "position": "System Architect",
                  "salary": "$320,800",
                  "start_date": "2011/04/25",
                  "office": "Edinburgh",
                  "extn": "5421"
             },
             {
                  "id": "2",
                  "name": "Garrett Winters",
                  "position": "Accountant",
                  "salary": "$170,750",
                  "start_date": "2011/07/25",
                  "office": "Tokyo",
                  "extn": "8422"
              },
         ]
    }

二，服务器处理(Server-side processing)

        "processing": true,
            "serverSide": true,
            ajax(data, callback, settings) {
                console.log(data);
                //封装请求参数
                var param = {};
                param.pageSize = data.length;       //页面显示记录条数，在页面显示每页显示多少项的时候
                param.pageIndex = data.start + 1;   //开始的记录序号
                console.log(param);
                $.ajax({
                    type: 'get',
                    url: 'http://192.168:8766/User/list',
                    cache: false,  //禁用缓存
                    data: param,
                    dataType: 'json',
                    success: function(res) {
                        setTimeout( function () {
                            var out = {};
                            out.draw = data.draw;
                            out.recordsTotal = res.data.count;
                            out.recordsFiltered = res.data.count;
                            out.data =  res.data.records;
                            callback( out );
                        }, 50 );
                    },
                    error() {
                        alert('error');
                    }
                })
            },
            "bLengthChange": false,     //关闭选择显示条数
            "bSort": false,             //不能排序
            "iDisplayLength": 10,
            "pagingType": "full_numbers",
            "language": {
                "bProcessing": "正在加载中......",
                "sZeroRecords": "没有检索到数据", 
                "info": "显示 _START_ 至 _END_ 条记录，共 _TOTAL_ 条记录",
                "sInfoFiltered": "数据表中共为 _MAX_ 条记录",
                "oPaginate" : {  
                    "sFirst" : "首页",  
                    "sPrevious" : "上一页",  
                    "sNext" : "下一页",  
                    "sLast" : "末页"  
                },
            },
            "columns": [
                {
                    data: 'UserId',
                    render(data, type, full, meta) {
                        return `
                            <input type="checkbox" class="checkchild" value="${data}" />
                            <img class="check-img" src="../assets/img/backstage_icon_cheakbox_default.png" alt="">
                        `
                    }
                },
                {data : "Account"},
                {data : "RealName"},
                {data : "Email"},
                {data : "DepartmentId"},
                {data : "UserId"},
                {data : "WorkGroupId"},
                {data : "IsManager"},
                {data : "Mobile"},
                {
                    data : "CreateDate",
                },
                {
                    render(data, type, full, meta) {
                        return `
                        <div class="am-btn-toolbar">
                            <div class="am-btn-group am-btn-group-xs">
                                <button class="am-btn am-btn-bg-white am-btn-xs am-text-secondary edit"><span class="am-icon-pencil-square-o"></span>编辑</button>
                                <button class="am-btn am-btn-bg-white am-btn-xs am-text-danger am-hide-sm-only del"><span class="am-icon-copy"></span> 删除</button>
                                <button class="am-btn am-btn-bg-white am-btn-xs am-text-warning am-hide-sm-only authorize"><span class="am-icon-trash-o"></span> 授权</button>
                            </div>
                        </div>`
                    }
                }
            ]

param.pageSize = data.length;       //页面显示记录条数，在页面显示每页显示多少项的时候
param.pageIndex = data.start + 1;   //开始的记录序号

• pageSize：为后台数据，每页有多少条数据
• pageIndex：页面索引

因为data.start默认值为0，所以加一表示第一页开始

记录自己踩过的坑