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:  //第几次渲染动作（每跳转一次就+1）
columns[][data]: id
columns[][name]:
columns[][searchable]: true
columns[][orderable]: true
columns[][search][value]:
columns[][search][regex]: false
columns[][data]: taskId
columns[][name]:
columns[][searchable]: true
columns[][orderable]: true
columns[][search][value]:
columns[][search][regex]: false
columns[][data]: custId
columns[][name]:
columns[][searchable]: true
columns[][orderable]: true
columns[][search][value]:
columns[][search][regex]: false
columns[][data]: tel
columns[][name]:
columns[][searchable]: true
columns[][orderable]: true
columns[][search][value]:
columns[][search][regex]: false
columns[][data]: email
columns[][name]:
columns[][searchable]: true
columns[][orderable]: true
columns[][search][value]:
columns[][search][regex]: false
order[][column]:
order[][dir]: asc
start:     //分页查询的起始条目
length:     //分页查询的数量
search[value]:
search[regex]: false
_: 

2. 后端服务返回数据实例

{
    "draw": , //和请求的参数保持一致
    "recordsTotal": , //总的数据条数（没看出来什么用）
    "recordsFiltered": , //实际计算页数的数据条数（此例子的话将展示位15页）
    "data": [{ //按照请求的Length返回10条数据
        "id": ,
        "taskId": ,
        "custId": ,
        "tel": "",
        "email": "11000+11006@gmail.com",
        "updateTime": "2018-08-10 13:53:13.0"
    }, {
        "id": ,
        "taskId": ,
        "custId": ,
        "tel": "",
        "email": "11000+11005@gmail.com",
        "updateTime": "2018-08-10 13:53:13.0"
    }, {
        "id": ,
        "taskId": ,
        "custId": ,
        "tel": "",
        "email": "11000+11004@gmail.com",
        "updateTime": "2018-08-10 13:53:13.0"
    }, {
        "id": ,
        "taskId": ,
        "custId": ,
        "tel": "",
        "email": "11000+11003@gmail.com",
        "updateTime": "2018-08-10 13:53:13.0"
    }, {
        "id": ,
        "taskId": ,
        "custId": ,
        "tel": "",
        "email": "11000+11002@gmail.com",
        "updateTime": "2018-08-10 13:53:13.0"
    }, {
        "id": ,
        "taskId": ,
        "custId": ,
        "tel": "",
        "email": "11000+11001@gmail.com",
        "updateTime": "2018-08-10 13:53:13.0"
    }, {
        "id": ,
        "taskId": ,
        "custId": ,
        "tel": "",
        "email": "11000+11009@gmail.com",
        "updateTime": "2018-08-07 11:32:49.0"
    }, {
        "id": ,
        "taskId": ,
        "custId": ,
        "tel": "",
        "email": "11000+11008@gmail.com",
        "updateTime": "2018-08-07 11:32:49.0"
    }, {
        "id": ,
        "taskId": ,
        "custId": ,
        "tel": "",
        "email": "11000+11007@gmail.com",
        "updateTime": "2018-08-07 11:32:49.0"
    }, {
        "id": ,
        "taskId": ,
        "custId": ,
        "tel": "",
        "email": "11000+11006@gmail.com",
        "updateTime": "2018-08-07 11:32:49.0"
    }]
}