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

Posted 2021-01-03 一沙世界

一、官网

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": "[email protected]",
        "updateTime": "2018-08-10 13:53:13.0"
    }, {
        "id": 305108902,
        "taskId": 11000,
        "custId": 11005,
        "tel": "13812311005",
        "email": "[email protected]",
        "updateTime": "2018-08-10 13:53:13.0"
    }, {
        "id": 305108901,
        "taskId": 11000,
        "custId": 11004,
        "tel": "13812311004",
        "email": "[email protected]",
        "updateTime": "2018-08-10 13:53:13.0"
    }, {
        "id": 305108900,
        "taskId": 11000,
        "custId": 11003,
        "tel": "13812311003",
        "email": "[email protected]",
        "updateTime": "2018-08-10 13:53:13.0"
    }, {
        "id": 305108899,
        "taskId": 11000,
        "custId": 11002,
        "tel": "13812311002",
        "email": "[email protected]",
        "updateTime": "2018-08-10 13:53:13.0"
    }, {
        "id": 305108898,
        "taskId": 11000,
        "custId": 11001,
        "tel": "13812311001",
        "email": "[email protected]",
        "updateTime": "2018-08-10 13:53:13.0"
    }, {
        "id": 305108897,
        "taskId": 11000,
        "custId": 11009,
        "tel": "13812311000",
        "email": "[email protected]",
        "updateTime": "2018-08-07 11:32:49.0"
    }, {
        "id": 305108896,
        "taskId": 11000,
        "custId": 11008,
        "tel": "13812311000",
        "email": "[email protected]",
        "updateTime": "2018-08-07 11:32:49.0"
    }, {
        "id": 305108895,
        "taskId": 11000,
        "custId": 11007,
        "tel": "13812311000",
        "email": "[email protected]",
        "updateTime": "2018-08-07 11:32:49.0"
    }, {
        "id": 305108894,
        "taskId": 11000,
        "custId": 11006,
        "tel": "13812311000",
        "email": "[email protected]",
        "updateTime": "2018-08-07 11:32:49.0"
    }]
}