您的位置:首页 > Web前端 > JQuery

jQuery datatable 分页

2016-08-12 12:10 190 查看
1、前台以userInfo.js为例
var tableInit 的aLengthMenu属性设置分页
[[2,15,15, 20, -1]
"iDisplayLength" : 2, 设置值与[[2,15,15, 20, -1] 第一个值一致
"bStateSave":true,设置为true,这样可以防止假如已经访问到第5页,ctrl+F5 后又回到第一

页
"sAjaxSource" : "listPagingUser?rand="+ Math.random(),设置成分页url

当点击上一页下一页动作时自动向后台发送listPagingUser请求并把很多参数传过去,具体有哪些可用

浏览器debug工作查看,分页用到的有iDisplayLength 、iDisplayStart

当切换每页显示多少条时,也会自动触发"listPagingUser请求

2、后台以UserController为例
方法listPagingUser

List<User> userList = userService.pagination4User(page);根据前台传过来的
iDisplayLength 每页显示多少条
iDisplayStart 从第几条记录开始显示
sEcho 前台传过来后台再原样回传回去(datatable就这么要求的)
具体分页sql见mapper文件

List<User> allUser = userService.listAllUser();
int count = allUser.size();//获取总条数

PageData pd = new PageData();
然后将下面信息回传到前台,datable根据这些参数完成自动分页、

pd.setIDisplayLength(page.getiDisplayLength()); //每页显示多少条
pd.setIDisplayStart(page.getiDisplayStart());从第几条记录开始显示
pd.setAaData(userList); //分页数据
pd.setITotalDisplayRecords(Integer.toString(count)); //设置为总条数
pd.setITotalRecords(Integer.toString(count)); //设置为总条数
pd.setSEcho(page.getsEcho()); //原样返回

String json = JSON.toJSONString(pd); //搞成json回传到前台
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: