Datatables分页

插件工具

    dataTables是自带有分页功能的，在设置”paging”: true之后，就可以开启前端分页。
    但是有一个弊端，就是只能对表格的数据进行分页，而在数据量过多时，要通过一次请求拿到所有数据显然是不现实的，这时候就需要后台进行分页，而前端通过请求页码得到单页数据，这时候要如何实现分页呢？在踩了几天的坑之后，终于实现了分页，下面来简单的总结一下。

  • 首先来看一下后台接口的数据格式
1
2
3
4
5
6
7
8
9
10
11
12
13
//request
{
    pageNo: 1,
    pageSize: 10
}
//response
{
    data: {
        list: [……],
        totalCount: 100
    },
    status: "200"
}

在请求时需要发送页码和每页的数据条数，接口返回的list就是需要的数据，totalCount则是数据的总数。

  • 声明一下需要发送的数据
1
2
3
4
var sendData = {
    pageNo: 1,
    pageSize: 10
};
  • 接下来配置一下dataTbles，使用ajax方式拿到数据

具体的配置不多介绍，需要注意的是，首先要开启服务器模式。

1
2
"serverSide"  : true,
"processing"  : true,

之后配置一下datatable的ajax配置项，这里是直接使用jQuery的ajax方法发送的请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
"ajax" : function (data, callback) {	//data是表格数据，callback写入返回的数据
	$.ajax({
        url        : url,
        dataType   : "json",
        contentType: "application/json",
        headers    : {
            token: token
        },
        data       : JSON.stringify(sendData),
        type       : "post",
        success    : function (res) {
            if(res.status == 200){	
                callback({
                    recordsTotal   : res.data.totalCount,	//返回数据的总数
                    recordsFiltered: res.data.totalCount,	//返回数据数量不进行过滤，每次查询均视为全部结果
                    data           : res.data.list
                });
            }
        }
    });
}

这里实现之后应该就可以实现分页了，但是还有一个问题，就是在切换页跟每页条数的时候，数据都不会发生变化，这是因为每次发送的sendData都没有变化。

  • 最后一步，换页的实现
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    //page切换事件
    $('#table').on('page.dt', function () {
        sendData.pageNo = table.page() + 1;		//获取当前page
        sendData.pageSize = table.page.len();	//获取当前page size
    });
    //page size切换事件
    $('#table').on('length.dt', function () {
        sendData.pageNo = 1;
        sendData.pageSize = table.page.len();
    });

这样就完成了后台分页的前端实现。

最后记录下dataTables刷新数据用到的方法

1
2
3
4
//更改table ajax请求的参数
table.settings()[0].ajax.data = sendData; 
//刷新表格数据
table.ajax.reload();

本文标题:Datatables分页

文章作者:Li Yu

发布时间:2017-09-18, 16:08:30

最后更新:2019-08-04, 19:02:00

原始链接:https://www.liyu.fun/2017/09/18/datatables分页/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
|