springboot實(shí)現(xiàn)分頁(yè)功能的完整代碼
更新時(shí)間：2023年04月15日 10:51:01 作者：Starbright.
Spring Boot是一個(gè)快速開發(fā)框架,它提供了很多便捷的功能,其中包括分頁(yè)查詢,下面這篇文章主要給大家介紹了關(guān)于springboot實(shí)現(xiàn)分頁(yè)功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
1.分頁(yè)功能的作用
分頁(yè)功能作為各類網(wǎng)站和系統(tǒng)不可或缺的部分（例如百度搜索結(jié)果的分頁(yè)等），當(dāng)一個(gè)頁(yè)面數(shù)據(jù)量大的時(shí)候分頁(yè)作用就體現(xiàn)出來(lái)的，其作用有以下5個(gè)。
（1）減少系統(tǒng)資源的消耗
（2）提高數(shù)據(jù)庫(kù)的查詢性能
（3）提升頁(yè)面的訪問速度
（4）符合用戶的瀏覽習(xí)慣
（5）適配頁(yè)面的排版
2.建立測(cè)試數(shù)據(jù)庫(kù)
由于需要實(shí)現(xiàn)分頁(yè)功能，所需的數(shù)據(jù)較多
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.分頁(yè)功能返回的結(jié)果封裝
新建一個(gè)util包并在包中新建Result通用結(jié)果類，代碼如下：
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;
}
}后端接口返回的數(shù)據(jù)會(huì)根據(jù)以上格式進(jìn)行數(shù)據(jù)封裝，包括業(yè)務(wù)碼、返回信息、實(shí)際的數(shù)據(jù)結(jié)果。這個(gè)格式是開發(fā)人員自行設(shè)置的，如果有其他更好的方案也可以進(jìn)行適當(dāng)?shù)恼{(diào)整。
在util包中新建PageResult通用結(jié)果類，代碼如下：
package ltd.newbee.mall.util;
import java.util.List;
/**
* 分頁(yè)工具類
*/
public class PageResult {
//總記錄數(shù)
private int totalCount;
//每頁(yè)記錄數(shù)
private int pageSize;
//總頁(yè)數(shù)
private int totalPage;
//當(dāng)前頁(yè)數(shù)
private int currPage;
//列表數(shù)據(jù)
private List<?> list;
/**
*
* @param totalCount 總記錄數(shù)
* @param pageSize 每頁(yè)記錄數(shù)
* @param currPage 當(dāng)前頁(yè)數(shù)
* @param list 列表數(shù)據(jù)
*/
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.分頁(yè)功能代碼具體實(shí)現(xiàn)
4.1數(shù)據(jù)層
在UserDao接口中新增兩個(gè)方法findUsers()和getTotalUser()，代碼如下所示：
/**
* 返回分頁(yè)數(shù)據(jù)列表
*
* @param pageUtil
* @return
*/
List<User> findUsers(PageQueryUtil pageUtil);
/**
* 返回?cái)?shù)據(jù)總數(shù)
*
* @param pageUtil
* @return
*/
int getTotalUser(PageQueryUtil pageUtil);
在UserMapper.xml文件中新增這兩個(gè)方法的映射語(yǔ)句，代碼如下所示：
<!--分頁(yè)-->
<!--查詢用戶列表-->
<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>
<!--查詢用戶總數(shù)-->
<select id="getTotalUser" parameterType="Map" resultType="int">
select count(*) from tb_user
</select>
4.2業(yè)務(wù)層
新建service包，并新增業(yè)務(wù)類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;
@Service
public class UserService {
@Autowired
private UserDao userDao;
public PageResult getUserPage(PageQueryUtil pageUtil){
//當(dāng)前頁(yè)面中的數(shù)據(jù)列表
List<User> users = userDao.findUsers(pageUtil);
//數(shù)據(jù)總條數(shù)，用于計(jì)算分頁(yè)數(shù)據(jù)
int total = userDao.getTotalUser(pageUtil);
//分頁(yè)信息封裝
PageResult pageResult = new PageResult(users,total,pageUtil.getLimit(),pageUtil.getPage());
return pageResult;
}
}
首先根據(jù)當(dāng)前頁(yè)面和每頁(yè)條數(shù)查詢當(dāng)前頁(yè)的數(shù)據(jù)集合，然后調(diào)用select count（*）語(yǔ)句查詢數(shù)據(jù)的總條數(shù)用于計(jì)算分頁(yè)數(shù)據(jù)，最后將獲取的數(shù)據(jù)封裝到PageResult對(duì)象中并返回給控制層。
4.3控制層
在controller包中新建PageTestController類，用于實(shí)現(xiàn)分頁(yè)請(qǐng)求的處理并返回查詢結(jié)果，代碼如下所示：
@RestController
@RequestMapping("users")
public class PageTestController {
@Autowired
private UserService userService;
//分頁(yè)功能測(cè)試
@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"))){
//返回錯(cuò)誤碼
result.setResultCode(500);
//錯(cuò)誤信息
result.setMessage("參數(shù)異常！");
return result;
}
//封裝查詢參數(shù)
PageQueryUtil queryParamList = new PageQueryUtil(params);
//查詢并封裝分頁(yè)結(jié)果集
PageResult userPage = userService.getUserPage(queryParamList);
//返回成功碼
result.setResultCode(200);
result.setMessage("查詢成功");
//返回分頁(yè)數(shù)據(jù)
result.setData(userPage);
return result;
}
}
分頁(yè)功能的交互流程：前端將所需頁(yè)碼和條數(shù)參數(shù)傳輸給后端，后端在接收分頁(yè)請(qǐng)求后對(duì)分頁(yè)參數(shù)進(jìn)行計(jì)算，并利用MySQL的limit關(guān)鍵字查詢對(duì)應(yīng)的記錄，在查詢結(jié)果被封裝后返回給前端。在TestUserControler類上使用的是@RestController注解，該注解相當(dāng)于@ResponseBody＋@Controller的組合注解。
5.jqGrid分頁(yè)插件
jqGrid是一個(gè)用來(lái)顯示網(wǎng)格數(shù)據(jù)的jQuery插件。開發(fā)人員通過使用jqGrid可以輕松實(shí)現(xiàn)前端頁(yè)面與后臺(tái)數(shù)據(jù)的Ajax異步通信并實(shí)現(xiàn)分頁(yè)功能。同時(shí)，jqGrid是一款代碼開源的分頁(yè)插件，源碼也一直處于迭代更新的狀態(tài)中。
下載地址：jqGrid
下載jqGrid后解壓文件，將解壓的文件直接拖進(jìn)項(xiàng)目的static目錄下
以下是jqGrid實(shí)現(xiàn)分頁(yè)的步驟：
首先，在前端頁(yè)面代碼中引入jqGrid分頁(yè)插件所需的源文件，代碼如下所示：
<link href="plugins/jqgrid-5.8.2/ui.jqgrid-bootstrap4.css" rel="external nofollow" rel="stylesheet"/> <!--jqGrid依賴jQuery,因此需要先引入jquery.min.js文件，下方地址為字節(jié)跳動(dòng)提供的cdn地址--> <script src="http://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script> <!--grid.locale-cn.js為國(guó)際化所需的文件，-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>
其次，在頁(yè)面中需要展示分頁(yè)數(shù)據(jù)的區(qū)域添加用于jqGrid初始化的代碼：
<!--jqGrid必要DOM，用于創(chuàng)建表格展示列表數(shù)據(jù)--> <table id="jqGrid" class="table table-bordered"></table> <!--jqGrid必要DOM，分頁(yè)信息區(qū)域--> <div id="jqGridPager"></div>
最后，調(diào)用jqGrid分頁(yè)插件的jqGrid()方法渲染分頁(yè)展示區(qū)域，代碼如下所示：
jqGrid()方法中的參數(shù)及含義如圖所示。
jqGrid前端頁(yè)面測(cè)試：
在resources/static目中新建jqgrid-page-test.html文件，代碼如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jqGrid分頁(yè)測(cè)試</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 style="margin: 24px;">
<!--數(shù)據(jù)展示列表，id為jqGrid-->
<table id="jqGrid" class="table table-bordered"></table>
<!--分頁(yè)按鈕展示區(qū)-->
<div id="jqGridPager"></div>
</div>
</body>
<!--jqGrid依賴jQuery,因此需要先引入jquery.min.js文件，下方地址為字節(jié)跳動(dòng)提供的cdn地址-->
<script src="http://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<!--grid.locale-cn.js為國(guó)際化所需的文件，-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底部滾動(dòng)條
$("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});
}
});
$(window).resize(function () {
$("jqGrid").setGridWidth($(".card-body").width());
});
});
總結(jié)
到此這篇關(guān)于springboot實(shí)現(xiàn)分頁(yè)功能的文章就介紹到這了,更多相關(guān)springboot分頁(yè)功能內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Java原生方法實(shí)現(xiàn) AES 算法示例
這篇文章主要介紹了Java原生方法實(shí)現(xiàn) AES 算法,結(jié)合實(shí)例形式分析了Java實(shí)現(xiàn)AES加密算法的相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
這篇文章主要介紹了Java漢字轉(zhuǎn)拼音案例詳解,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
idea創(chuàng)建SpringBoot項(xiàng)目時(shí)Type選maven?project和maven?pom有何區(qū)別
Maven是一個(gè)Java工程的管理工具,跟其相同功能的工具如Gradle,下面這篇文章主要給大家介紹了關(guān)于idea創(chuàng)建SpringBoot項(xiàng)目時(shí)Type選maven?project和maven?pom有何區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了Java之如何關(guān)閉流問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-11-11
這篇文章主要介紹了java比較兩個(gè)json文件的差異及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了java字符串如何只保留數(shù)字、字母、中文問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
本文詳細(xì)介紹了Spring Boot中事務(wù)管理的使用方法,包括事務(wù)的基本概念、配置、傳播行為、隔離級(jí)別以及回滾機(jī)制,通過使用@Transactional注解,可以方便地實(shí)現(xiàn)事務(wù)的控制,文章還討論了事務(wù)方法的可見性、自我調(diào)用問題以及超時(shí)設(shè)置等注意事項(xiàng),感興趣的朋友一起看看吧2025-02-02
Java多線程編程之使用Exchanger數(shù)據(jù)交換實(shí)例
這篇文章主要介紹了Java多線程編程之使用Exchanger數(shù)據(jù)交換實(shí)例,本文直接給出實(shí)例代碼,需要的朋友可以參考下2015-05-05
使用 Spring Boot 實(shí)現(xiàn) WebSocket實(shí)時(shí)通信
本篇文章主要介紹了使用 Spring Boot 實(shí)現(xiàn) WebSocket實(shí)時(shí)通信，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-10-10
這篇文章主要介紹了Springboot中集成Swagger2框架的方法，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-12-12