一、官网
https://datatables.net/
二、引用
三、ajax分页初始化
1. 前端脚本部分
$('#example2').DataTable( { "processing": true, //查询缓慢的时候会有一个Processing状态的提示 "serverSide": true, "ajax": "tabledate/paging?myparam=HAHA", //myparam是自定义的条件 "columns": [ //返回的数据的列设置 { "data": "id" }, { "data": "taskId" }, { "data": "custId" }, { "data": "tel" }, { "data": "email" } ]} ); 写的很简单，发出去的请求携带的参数却是这个样子：
2. 请求实例
myparam: HAHA //自定义的请求参数draw: 2 //第几次渲染动作（每跳转一次就+1）columns[0][data]: idcolumns[0][name]: columns[0][searchable]: truecolumns[0][orderable]: truecolumns[0][search][value]: columns[0][search][regex]: falsecolumns[1][data]: taskIdcolumns[1][name]: columns[1][searchable]: truecolumns[1][orderable]: truecolumns[1][search][value]: columns[1][search][regex]: falsecolumns[2][data]: custIdcolumns[2][name]: columns[2][searchable]: truecolumns[2][orderable]: truecolumns[2][search][value]: columns[2][search][regex]: falsecolumns[3][data]: telcolumns[3][name]: columns[3][searchable]: truecolumns[3][orderable]: truecolumns[3][search][value]: columns[3][search][regex]: falsecolumns[4][data]: emailcolumns[4][name]: columns[4][searchable]: truecolumns[4][orderable]: truecolumns[4][search][value]: columns[4][search][regex]: falseorder[0][column]: 0order[0][dir]: ascstart: 10 //分页查询的起始条目length: 10 //分页查询的数量search[value]: search[regex]: false_: 1535706555699
2. 后端服务返回数据实例
{ "draw": 2, //和请求的参数保持一致 "recordsTotal": 1500, //总的数据条数（没看出来什么用） "recordsFiltered": 150, //实际计算页数的数据条数（此例子的话将展示位15页） "data": [{ //按照请求的Length返回10条数据 "id": 305108903, "taskId": 11000, "custId": 11006, "tel": "13812311006", "email": "11000+11006@gmail.com", "updateTime": "2018-08-10 13:53:13.0" }, { "id": 305108902, "taskId": 11000, "custId": 11005, "tel": "13812311005", "email": "11000+11005@gmail.com", "updateTime": "2018-08-10 13:53:13.0" }, { "id": 305108901, "taskId": 11000, "custId": 11004, "tel": "13812311004", "email": "11000+11004@gmail.com", "updateTime": "2018-08-10 13:53:13.0" }, { "id": 305108900, "taskId": 11000, "custId": 11003, "tel": "13812311003", "email": "11000+11003@gmail.com", "updateTime": "2018-08-10 13:53:13.0" }, { "id": 305108899, "taskId": 11000, "custId": 11002, "tel": "13812311002", "email": "11000+11002@gmail.com", "updateTime": "2018-08-10 13:53:13.0" }, { "id": 305108898, "taskId": 11000, "custId": 11001, "tel": "13812311001", "email": "11000+11001@gmail.com", "updateTime": "2018-08-10 13:53:13.0" }, { "id": 305108897, "taskId": 11000, "custId": 11009, "tel": "13812311000", "email": "11000+11009@gmail.com", "updateTime": "2018-08-07 11:32:49.0" }, { "id": 305108896, "taskId": 11000, "custId": 11008, "tel": "13812311000", "email": "11000+11008@gmail.com", "updateTime": "2018-08-07 11:32:49.0" }, { "id": 305108895, "taskId": 11000, "custId": 11007, "tel": "13812311000", "email": "11000+11007@gmail.com", "updateTime": "2018-08-07 11:32:49.0" }, { "id": 305108894, "taskId": 11000, "custId": 11006, "tel": "13812311000", "email": "11000+11006@gmail.com", "updateTime": "2018-08-07 11:32:49.0" }]}