一、问题描述
前端需要使用表格来展示数据,找了一些插件,最后确定使用dataTables组件来做。
后端的分页接口已经写好了,不能修改。接口需要传入页码(pageNumber)和页面显示数据条数(pageSize),显示相应的数据。
二、分析
先来分析下分页实现。
一是后端分页: 这种情况,请求的数据,后端返回的数据格式都按着官网来编码,很容易实现,在官网上有示例,不多说明。
二是前端分页: 前端分页也是支持的,不过需要一次把所有数据都获取到才可以。
看到这里,问题来了。由于后端在目前的情况下是更改不了,只能在前端实现。但是,现在 又不满足前端分页的条件 :
一次性获取所有数据(现在后端数据接口只能返回相应页码的数据)。
介于目前的情况,获取的数据只有一页,没有所有的页码。
试试能不能 伪装一下后端分页的情况,就是开启后端分页,在请求之前,将传入的数据进行重组,在获取到数据后,将返回的数据按照后端分页的数据格式组装一遍。
经过测试,是可以的。
三、实现
通过DataTables配置参数ajax项 实现的
目前最新DataTables的版本是1.10.15版本 ,以下是使用此版本。
DataTables参数ajax接收三种类型的参数:
- *string: 设置获取数据的url
- *object:和 jQuery.ajax 定义类似
- *function:自定义获取数据的功能
直接上代码吧,都有注释。
前端页面代码:
1 |
|
JSON数据格式:
效果图:
参考链接
jQuery DataTables插件自定义Ajax分页实例解析
Datatables插件1.10.15版本服务器处理模式ajax获取分页数据实例解析