jQuery datatable 分页

最新推荐文章于 2025-07-01 14:21:23 发布

原创最新推荐文章于 2025-07-01 14:21:23 发布 · 4.4k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种基于前端页面和后端数据交互的分页实现方案。通过设置分页参数如每页显示条数和起始条数，前端能够与后端进行有效通信。后端根据这些参数执行相应的分页查询，并将结果返回给前端展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >



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回传到前台

为生活加点乐子，TBDIAN：大欢乐情调