JPA+Springboot实现分页效果
JPA+Springboot实现分页效果
后端
JPA 默认提供了一个分页类:org.springframework.data.domain.Page, 这个分页类已经能够满足各种分页需要了,所以大部分时候用它就足够了。但是除了一点,就是如图所示的,比如当前是第8页,前面要显示3个,后面要显示3个,总共7条分页点,这个类默认就不提供了。
所以我们做了一个 Page4Navigator, 首先对 Page 类进行了封装,然后在构造方法里提供了一个 navigatePages 参数。
navigatePages:导航需要的个数,这里设置为7,就表示如图所示的效果,前面3个,后面3个。
思路:
- 当总页数小于或等于导航页码数时,就遍历现有的页码总数,这种最简单了。
当总页数大于导航页码数(7)时,现在当前页
num
为8,就计算出开始数num - navigatePages / 2
和结尾数num + navigatePages / 2
,这种情况下分别为5和11,对开始数5使用for
循环7次,就可以得到一个int
数组变量navigatepageNums
[5,6,7,8,9,10,11],方便前端遍历展示。- 异常处理:
- 若起始值小于1时,则起始值设置为1,对着起始值循环7次
startNum++
得到数组 - 若结尾值大于总条数时,则结尾值设置为总条数,数组索引设置为6(7-1),对着结尾值循环7次
endNum--
得到数组
- 若起始值小于1时,则起始值设置为1,对着起始值循环7次
工具类Page4Navigator
private void calcNavigatepageNums() {
int navigatepageNums[];
int totalPages = getTotalPages();
int num = getNumber();
//当总页数小于或等于导航页码数时
if (totalPages <= navigatePages) {
navigatepageNums = new int[totalPages];
for (int i = 0; i < totalPages; i++) {
navigatepageNums[i] = i + 1;
}
} else { //当总页数大于导航页码数时
navigatepageNums = new int[navigatePages];
int startNum = num - navigatePages / 2;
int endNum = num + navigatePages / 2;
if (startNum < 1) {
startNum = 1;
//(最前navigatePages页
for (int i = 0; i < navigatePages; i++) {
navigatepageNums[i] = startNum++;
}
} else if (endNum > totalPages) {
endNum = totalPages;
//最后navigatePages页
for (int i = navigatePages - 1; i >= 0; i--) {
navigatepageNums[i] = endNum--;
}
} else {
//所有中间页
for (int i = 0; i < navigatePages; i++) {
navigatepageNums[i] = startNum++;
}
}
}
this.navigatepageNums = navigatepageNums;
}
controller中传入需要的导航数:5页
@GetMapping("/categories")
public Page4Navigator<Category> list(@RequestParam(value = "start", defaultValue = "0") int start, @RequestParam(value = "size", defaultValue = "5") int size) throws Exception {
start = start<0?0:start;
Page4Navigator<Category> page =categoryService.list(start, size, 5); //5表示导航分页最多有5个,像 [1,2,3,4,5] 这样
return page;
}
service中调用封装好的工具类 Page4Navigator
public Page4Navigator<Category> list(int start, int size, int navigatePages) {
Sort sort = new Sort(Sort.Direction.DESC, "id");
Pageable pageable = new PageRequest(start, size,sort);
Page pageFromJPA =categoryDAO.findAll(pageable);
return new Page4Navigator<>(pageFromJPA,navigatePages);
}
前端
思路:
开始加载的时候访问
uri
,mounted:function()
调用method
中的list()
方法,传入参数0;pagination
和beans
得到数据,取出数据放到分页条中点击最前页时,传入参数
first
到jump(page,vue)
,调用下面的同名函数jump()
中的list(0)
,调用vue
的list(0)
。相当于vue提供的三个方法中间夹带着方法。
构造出导航条
<div class="pageDiv" th:fragment="html">
<nav>
<ul class="pagination">
<li :class="{ disabled: pagination.first }">
<a href="#nowhere" @click="jump('first')">«</a>
</li>
<li :class="{ disabled: !pagination.hasPrevious }">
<a href="#nowhere" @click="jump('pre')">‹</a>
</li>
<li v-for="i in pagination.navigatepageNums">
<a href="#nowhere" @click="jumpByNumber(i-1)" >
{{i}}
</a>
</li>
<li :class="{ disabled: !pagination.hasNext }">
<a href="#nowhere" @click="jump('next')">›</a>
</li>
<li :class="{ disabled: pagination.last }">
<a href="#nowhere" @click="jump('last')">»</a>
</li>
</ul>
</nav>
</div>
$(function(){
var data4Vue = {
uri:'categories',
pagination:{},
beans: []
};
//ViewModel
var vue = new Vue({
el: '#workingArea',
data: data4Vue,
mounted:function(){ //mounted 表示这个 Vue 对象加载成功了
this.list(0);
},
methods: {
list:function(start){
var url = this.uri+ "?start="+start;
axios.get(url).then(function(response) {
vue.pagination = response.data;
vue.beans = response.data.content ;
});
},
jump: function(page){
jump(page,vue); //定义在adminHeader.html 中
},
jumpByNumber: function(start){
jumpByNumber(start,vue);
}
}
});
});
//跳转函数
function jump(page,vue){
if('first'== page && !vue.pagination.first)
vue.list(0);
else if('pre'== page && vue.pagination.hasPrevious )
vue.list(vue.pagination.number-1);
else if('next'== page && vue.pagination.hasNext)
vue.list(vue.pagination.number+1);
else if('last'== page && !vue.pagination.last)
vue.list(vue.pagination.totalPages-1);
}
//跳转函数
function jumpByNumber(start,vue){
if(start!=vue.pagination.number)
vue.list(start);
}
原文地址:https://www.cnblogs.com/senup/p/12171248.html
- wpf 控件大小随窗体大小改变而改变
- 零基础学编程036:快速编写一个GUI程序
- WPF TreeView 选择事件执行两次,获取TreeView的父节点的解决方法
- 零基础学编程041:欧拉公式的几何意义
- 零基础学编程040:在Windows上安装Python库的正确姿势
- c++/c 获取cpp文件行号跟文件名
- 零基础学编程042:画函数图像
- C-SATS工程副总裁教你如何用TensorFlow分类图像 part2
- C++11 Lambda表达汇总总结
- TensorFlow开发环境搭建(Ubuntu16.04+GPU+TensorFlow源码编译)
- C++虚析构函数解析
- C-SATS工程副总裁教你如何用TensorFlow分类图像 part1
- 帝国cms文章页调用当前文章URL如何操作?
- dedecms文章页调用地址(当前文章URL)如何操作?
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释
- 小程序实现全屏幕高斯模糊背景图
- 小程序顶部导航栏,可滑动,可动态选中放大
- 小程序不同页面的异步回调,callback和promise的使用讲解
- java入门019~springboot批量导入excel数据到mysql
- Java点餐系统和点餐小程序新加微信消息推送功能
- Java点餐系统和点餐小程序新加排号等位功能
- IDEA上给文件添加姓名,日期,版本号
- matlab机器人工具箱安装与卸载
- 浅谈Linux下修改/设置环境变量JAVA_HOME的方法
- Linux服务器配置多个svn仓库流程详解
- linux服务器显卡崩溃解决方案
- LINUX查看进程的4种方法(小结)
- Linux下的多线程编程实例解析
- CentOS使用expect批量远程执行脚本和命令
- Centos8最小化部署安装OpenStack Ussuri的详细教程