dataTables是一款很强大很好用的前端table 分页插件，地址：dataTables
如何使用大家可以去官网看看教程，此处总结下dataTables结合ajax需要注意的点
$(document).ready(function() { $('#example').DataTable( { "ajax": "数据url", "columns": [ { "data": "name" }, { "data": "position" }, { "data": "office" }, { "data": "extn" }, { "data": "start_date" }, { "data": "salary" } ] } ); } );{ "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来动态指向数据源。
$(document).ready(function() { $('#example').DataTable( { "ajax": "数据url", "dataSrc": "data.records", "columns": [ { "data": "name" }, { "data": "position" }, { "data": "office" }, { "data": "extn" }, { "data": "start_date" }, { "data": "salary" } ] } ); } ); "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" }, ] } "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，所以加一表示第一页开始
记录自己踩过的坑