javascript控件（二）：一个好用的表格（分页实例）

一、官网

https://datatables.net/

二、引用

<script src="bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>

三、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]: id
columns[0][name]:
columns[0][searchable]: true
columns[0][orderable]: true
columns[0][search][value]:
columns[0][search][regex]: false
columns[1][data]: taskId
columns[1][name]:
columns[1][searchable]: true
columns[1][orderable]: true
columns[1][search][value]:
columns[1][search][regex]: false
columns[2][data]: custId
columns[2][name]:
columns[2][searchable]: true
columns[2][orderable]: true
columns[2][search][value]:
columns[2][search][regex]: false
columns[3][data]: tel
columns[3][name]:
columns[3][searchable]: true
columns[3][orderable]: true
columns[3][search][value]:
columns[3][search][regex]: false
columns[4][data]: email
columns[4][name]:
columns[4][searchable]: true
columns[4][orderable]: true
columns[4][search][value]:
columns[4][search][regex]: false
order[0][column]: 0
order[0][dir]: asc
start: 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"
}]
}