1.分页功能的作用分页功能作为各类网站和系统不可或缺的部分（例如百度搜索结果的分页等），当一个页面数据量大的时候分页作用就体现出来的，其作用有以下5个。
（1）减少系统资源的消耗
（2）提高数据库的查询性能
（3）提升页面的访问速度
（4）符合用户的浏览习惯
（5）适配页面的排版
2.建立测试数据库由于需要实现分页功能，所需的数据较多
drop table if exists tb_user;create table tb_user ( id int(11) not null auto_increment comment '主键id', name varchar(100) not null default '' comment '登录名', password varchar(100) not null default '' comment '密码', primary key (id) using btree) engine = innodb character set = utf8;insert into tb_user (id,name,password)value (1,'c','123456'),(2,'c++','123456'),(3,'java','123456'),(4,'python','123456'),(5,'r','123456'),(6,'c#','123456');insert into tb_user (id,name,password) value (7,'test1','123456');insert into tb_user (id,name,password) value (8,'test2','123456');insert into tb_user (id,name,password) value (9,'test3','123456');insert into tb_user (id,name,password) value (10,'test4','123456');insert into tb_user (id,name,password) value (11,'test5','123456');insert into tb_user (id,name,password) value (12,'test6','123456');insert into tb_user (id,name,password) value (13,'test7','123456');insert into tb_user (id,name,password) value (14,'test8','123456');insert into tb_user (id,name,password) value (15,'test9','123456');insert into tb_user (id,name,password) value (16,'test10','123456');insert into tb_user (id,name,password) value (17,'test11','123456');insert into tb_user (id,name,password) value (18,'test12','123456');insert into tb_user (id,name,password) value (19,'test13','123456');insert into tb_user (id,name,password) value (20,'test14','123456');insert into tb_user (id,name,password) value (21,'test15','123456');insert into tb_user (id,name,password) value (22,'test16','123456');insert into tb_user (id,name,password) value (23,'test17','123456');insert into tb_user (id,name,password) value (24,'test18','123456');insert into tb_user (id,name,password) value (25,'test19','123456');insert into tb_user (id,name,password) value (26,'test20','123456');insert into tb_user (id,name,password) value (27,'test21','123456');insert into tb_user (id,name,password) value (28,'test22','123456');insert into tb_user (id,name,password) value (29,'test23','123456');insert into tb_user (id,name,password) value (30,'test24','123456');insert into tb_user (id,name,password) value (31,'test25','123456');insert into tb_user (id,name,password) value (32,'test26','123456');insert into tb_user (id,name,password) value (33,'test27','123456');insert into tb_user (id,name,password) value (34,'test28','123456');insert into tb_user (id,name,password) value (35,'test29','123456');insert into tb_user (id,name,password) value (36,'test30','123456');insert into tb_user (id,name,password) value (37,'test31','123456');insert into tb_user (id,name,password) value (38,'test32','123456');insert into tb_user (id,name,password) value (39,'test33','123456');insert into tb_user (id,name,password) value (40,'test34','123456');insert into tb_user (id,name,password) value (41,'test35','123456');insert into tb_user (id,name,password) value (42,'test36','123456');insert into tb_user (id,name,password) value (43,'test37','123456');insert into tb_user (id,name,password) value (44,'test38','123456');insert into tb_user (id,name,password) value (45,'test39','123456');insert into tb_user (id,name,password) value (46,'test40','123456');insert into tb_user (id,name,password) value (47,'test41','123456');insert into tb_user (id,name,password) value (48,'test42','123456');insert into tb_user (id,name,password) value (49,'test43','123456');insert into tb_user (id,name,password) value (50,'test44','123456');insert into tb_user (id,name,password) value (51,'test45','123456');
3.分页功能返回的结果封装新建一个util包并在包中新建result通用结果类，代码如下：
package ltd.newbee.mall.entity;public class user { private integer id; private string name; private string password; public integer getid() { return id; } public void setid(integer id) { this.id = id; } public string getname() { return name; } public void setname(string name) { this.name = name; } public string getpassword() { return password; } public void setpassword(string password) { this.password = password; }}
后端接口返回的数据会根据以上格式进行数据封装，包括业务码、返回信息、实际的数据结果。这个格式是开发人员自行设置的，如果有其他更好的方案也可以进行适当的调整。
在util包中新建pageresult通用结果类，代码如下：
package ltd.newbee.mall.util;import java.util.list;/** * 分页工具类 */public class pageresult { //总记录数 private int totalcount; //每页记录数 private int pagesize; //总页数 private int totalpage; //当前页数 private int currpage; //列表数据 private list<?> list; /** * * @param totalcount 总记录数 * @param pagesize 每页记录数 * @param currpage 当前页数 * @param list 列表数据 */ public pageresult(int totalcount, int pagesize, int currpage, list<?> list) { this.totalcount = totalcount; this.pagesize = pagesize; this.currpage = currpage; this.list = list; this.totalpage = (int) math.ceil((double) totalcount / pagesize); } public int gettotalcount() { return totalcount; } public void settotalcount(int totalcount) { this.totalcount = totalcount; } public int getpagesize() { return pagesize; } public void setpagesize(int pagesize) { this.pagesize = pagesize; } public int gettotalpage() { return totalpage; } public void settotalpage(int totalpage) { this.totalpage = totalpage; } public int getcurrpage() { return currpage; } public void setcurrpage(int currpage) { this.currpage = currpage; } public list<?> getlist() { return list; } public void setlist(list<?> list) { this.list = list; }}
4.分页功能代码具体实现4.1数据层在userdao接口中新增两个方法findusers()和gettotaluser()，代码如下所示：
/** * 返回分页数据列表 * * @param pageutil * @return */ list<user> findusers(pagequeryutil pageutil); /** * 返回数据总数 * * @param pageutil * @return */ int gettotaluser(pagequeryutil pageutil);
在usermapper.xml文件中新增这两个方法的映射语句，代码如下所示：
<!--分页--> <!--查询用户列表--> <select id="findusers" parametertype="map" resultmap="userresult"> select id,name,password from tb_user order by id desc <if test="start!=null and limit!=null"> limit #{start}.#{limit} </if> </select> <!--查询用户总数--> <select id="gettotaluser" parametertype="map" resulttype="int"> select count(*) from tb_user </select>
4.2业务层新建service包，并新增业务类userservice，代码如下所示：
import ltd.newbee.mall.dao.userdao;import ltd.newbee.mall.entity.user;import ltd.newbee.mall.util.pageresult;import ltd.newbee.mall.util.pagequeryutil;import org.springframework.beans.factory.annotation.autowired;import org.springframework.stereotype.service;import java.util.list;@servicepublic class userservice { @autowired private userdao userdao; public pageresult getuserpage(pagequeryutil pageutil){ //当前页面中的数据列表 list<user> users = userdao.findusers(pageutil); //数据总条数，用于计算分页数据 int total = userdao.gettotaluser(pageutil); //分页信息封装 pageresult pageresult = new pageresult(users,total,pageutil.getlimit(),pageutil.getpage()); return pageresult; }}
首先根据当前页面和每页条数查询当前页的数据集合，然后调用select count（*）语句查询数据的总条数用于计算分页数据，最后将获取的数据封装到pageresult对象中并返回给控制层。
4.3控制层在controller包中新建pagetestcontroller类，用于实现分页请求的处理并返回查询结果，代码如下所示：
@restcontroller@requestmapping("users")public class pagetestcontroller { @autowired private userservice userservice; //分页功能测试 @requestmapping(value = "/list",method = requestmethod.get) public result list(@requestparam map<string,object> params){ result result = new result(); if (stringutils.isempty(params.get("page"))||stringutils.isempty(params.get("limit"))){ //返回错误码 result.setresultcode(500); //错误信息 result.setmessage("参数异常！"); return result; } //封装查询参数 pagequeryutil queryparamlist = new pagequeryutil(params); //查询并封装分页结果集 pageresult userpage = userservice.getuserpage(queryparamlist); //返回成功码 result.setresultcode(200); result.setmessage("查询成功"); //返回分页数据 result.setdata(userpage); return result; }}
分页功能的交互流程：前端将所需页码和条数参数传输给后端，后端在接收分页请求后对分页参数进行计算，并利用mysql的limit关键字查询对应的记录，在查询结果被封装后返回给前端。在testusercontroler类上使用的是@restcontroller注解，该注解相当于@responsebody＋@controller的组合注解。
5.jqgrid分页插件jqgrid是一个用来显示网格数据的jquery插件。开发人员通过使用jqgrid可以轻松实现前端页面与后台数据的ajax异步通信并实现分页功能。同时，jqgrid是一款代码开源的分页插件，源码也一直处于迭代更新的状态中。
下载地址：jqgrid
下载jqgrid后解压文件，将解压的文件直接拖进项目的static目录下
以下是jqgrid实现分页的步骤：
首先，在前端页面代码中引入jqgrid分页插件所需的源文件，代码如下所示：
<link href="plugins/jqgrid-5.8.2/ui.jqgrid-bootstrap4.css" rel="external nofollow" rel="stylesheet"/><!--jqgrid依赖jquery,因此需要先引入jquery.min.js文件，下方地址为字节跳动提供的cdn地址--><script src="http://s3.pstatp.com/cdn/expire-1-m/jquery/3.3.1/jquery.min.js"></script><!--grid.locale-cn.js为国际化所需的文件，-cn表示中文--><script src="plugins/jqgrid-5.8.2/grid.locale-cn.js"></script><script src="plugins/jqgrid-5.8.2/jquery.jqgrid.min.js"></script>
其次，在页面中需要展示分页数据的区域添加用于jqgrid初始化的代码：
<!--jqgrid必要dom，用于创建表格展示列表数据--><table id="jqgrid" class="table table-bordered"></table><!--jqgrid必要dom，分页信息区域--><div id="jqgridpager"></div>
最后，调用jqgrid分页插件的jqgrid()方法渲染分页展示区域，代码如下所示：
jqgrid()方法中的参数及含义如图所示。
jqgrid前端页面测试：
在resources/static目中新建jqgrid-page-test.html文件，代码如下所示：
<!doctype html><html><head> <meta charset="utf-8"> <title>jqgrid分页测试</title> <!--引入bootstrap样式文件--> <link rel="stylesheet" href="/static/bootstrap-5.3.0-alpha3-dist/css/bootstrap.css" rel="external nofollow" /> <link href="jqgrid-5.8.2/css/ui.jqgrid-bootstrap4.css" rel="external nofollow" rel="stylesheet"/></head><body><div > <!--数据展示列表，id为jqgrid--> <table id="jqgrid" class="table table-bordered"></table> <!--分页按钮展示区--> <div id="jqgridpager"></div></div></body><!--jqgrid依赖jquery,因此需要先引入jquery.min.js文件，下方地址为字节跳动提供的cdn地址--><script src="http://s3.pstatp.com/cdn/expire-1-m/jquery/3.3.1/jquery.min.js"></script><!--grid.locale-cn.js为国际化所需的文件，-cn表示中文--><script src="plugins/jqgrid-5.8.2/grid.locale-cn.js"></script><script src="plugins/jqgrid-5.8.2/jquery.jqgrid.min.js"></script><script src="jqgrid-page-test.js"></script></html>
jqgrid初始化
在resources/static目录下新建jqgrid-page-test.js文件，代码如下所示：
$(function () { $("#jqgrid").jqgrid({ url: 'users/list', datatype: "json", colmodel: [ {label: 'id',name: 'id', index: 'id', width: 50, hidden: true,key:true}, {label: '登录名',name: 'name',index: 'name', sortable: false, width: 80}, {label: '密码字段',name: 'password',index: 'password', sortable: false, width: 80} ], height: 485, rownum: 10, rowlist: [10,30,50], styleui: 'bootstrap', loadtext: '信息读取中...', rownumbers: true, rownumwidth: 35, autowidth: true, multiselect: true, pager: "#jqgridpager", jsonreader:{ root: "data.list", page: "data.currpage", total: "data.totalcount" }, prmnames:{ page: "page", rows: "limit", order: "order" }, gridcomplete: function () { //隐藏grid底部滚动条 $("#jqgrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"}); } }); $(window).resize(function () { $("jqgrid").setgridwidth($(".card-body").width()); });});
以上就是springboot分页功能怎么实现的详细内容。