基于springboot+thymeleaf+springDataJpa自带的分页插件实现完整的动态分页
实现百度搜索使用的前五后四原则,效果如下。

下面贴出代码,复制到前端即可,只需要域中放置page对象就可以。(springdatajpa自带的page 注意:第一页是按0开始算的)
<div class="page">
<ul class="pagination">
<!--上一页数-->
<li class="page-item" th:if="${page.pageable.getPageNumber() != 0}">
<a th:onclick="pageRequest([[${page.pageable.getPageNumber()-1}]])" class="page-link"
data-th-attr="pageIndex=${page.number} - 1" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item">
<a th:onclick="pageRequest(0)" class="page-link" >首页</a>
</li>
<!--前五后四分页实现-->
<!--总页数<10-->
<li th:if="${page.totalPages lt 11}" class="page-item" data-th-each="i : ${#numbers.sequence(0, page.totalPages)}"
data-th-classappend="${(page.number ) eq i} ? 'active' : ''" >
<a class="page-link" th:onclick="pageRequest([[${i}]])">
<span data-th-text="${i+1}"></span>
</a>
</li>
<!--总页数>10-->
<li th:if="${page.totalPages gt 10 && page.pageable.getPageNumber() lt 5}" class="page-item" data-th-each="i : ${#numbers.sequence(0, 9)}"
data-th-classappend="${(page.number ) eq i} ? 'active' : ''" >
<a class="page-link" th:onclick="pageRequest([[${i}]])">
<span data-th-text="${i+1}"></span>
</a>
</li>
<li th:if="${page.totalPages gt 10 && page.pageable.getPageNumber() gt 4 && page.totalPages lt page.pageable.getPageNumber()+5 }"
class="page-item" data-th-each="i : ${#numbers.sequence(page.totalPages-10, page.totalPages-1)}"
data-th-classappend="${(page.number ) eq i} ? 'active' : ''" >
<a class="page-link" th:onclick="pageRequest([[${i}]])">
<span data-th-text="${i+1}"></span>
</a>
</li>
<li th:if="${page.totalPages gt 10 && page.pageable.getPageNumber() gt 4 && page.pageable.getPageNumber()+4 lt page.totalPages}"
class="page-item" data-th-each="i : ${#numbers.sequence(page.pageable.getPageNumber()-5, page.pageable.getPageNumber()+4)}"
data-th-classappend="${(page.number ) eq i} ? 'active' : ''" >
<a class="page-link" th:onclick="pageRequest([[${i}]])">
<span data-th-text="${i+1}"></span>
</a>
</li>
<!--尾页-->
<li class="page-item">
<a th:onclick="pageRequest([[${page.getTotalPages() - 1}]])" class="page-link" >尾页</a>
</li>
<!--下一页-->
<li class="page-item" th:if="${page.pageable.pageNumber} != ${page.totalPages}-1">
<a class="page-link" th:onclick="pageRequest([[${page.pageable.pageNumber}+1]])">
»
</a>
</li>
</ul>
</div>
基于springboot+thymeleaf+springDataJpa自带的分页插件实现完整的动态分页的更多相关文章
- 【spring boot】14.spring boot集成mybatis,注解方式OR映射文件方式AND pagehelper分页插件【Mybatis】pagehelper分页插件分页查询无效解决方法
spring boot集成mybatis,集成使用mybatis拖沓了好久,今天终于可以补起来了. 本篇源码中,同时使用了Spring data JPA 和 Mybatis两种方式. 在使用的过程中一 ...
- 基于jquery 的分页插件,前端实现假分页效果
上次分享了一款jquery插件,现在依旧分享这个插件,不过上一次分享主要是用于regular框件,且每一页数据都是从后端获取过来的,这一次的分享主要是讲一次性获取完数据 然后手动进行分页.此需求基本上 ...
- 使用jQuery的分页插件jquery.pagination.js进行分页
1,需要用到jquery.pagination.js和pagination.css https://pan.baidu.com/s/1G3PLQSRGjvLxl2ryqpV76w https://pa ...
- springboot+thymeleaf+pageHelper带条件分页查询
html层 <div> <a class="num"><b th:text="'共 '+ ${result.resultMap['pages ...
- SpringBoot系列——Spring-Data-JPA(究极进化版) 自动生成单表基础增、删、改、查接口
前言 我们在之前的实现了springboot与data-jpa的增.删.改.查简单使用(请戳:SpringBoot系列——Spring-Data-JPA),并实现了升级版(请戳:SpringBoot系 ...
- Springboot集成mybatis通用Mapper与分页插件PageHelper
插件介绍 通用 Mapper 是一个可以实现任意 MyBatis 通用方法的框架,项目提供了常规的增删改查操作以及 Example 相关的单表操作.通用 Mapper 是为了解决 MyBatis 使用 ...
- MyBatis Generator实现MySQL分页插件
MyBatis Generator是一个非常方便的代码生成工具,它能够根据表结构生成CRUD代码,可以满足大部分需求.但是唯一让人不爽的是,生成的代码中的数据库查询没有分页功能.本文介绍如何让MyBa ...
- 【超酷超实用】CSS3可滑动跳转的分页插件制作教程
原文:[超酷超实用]CSS3可滑动跳转的分页插件制作教程 今天我要向大家分享一款很特别的CSS3分页插件,这款分页插件不仅可以点击分页按钮来实现分页,而且可以滑动滑杆来实现任意页面的跳转,看看都非常酷 ...
- jq分页插件,支持动态,静态分页的插件,简单易用。
工作中经常要用到分页功能.为了方便封装了一个比较通用的分页插件开源出来了,简单易用. 官网:https://cwlch.github.io/Ch_Paging 下载地址:https://github. ...
随机推荐
- Laravel 中 validation 验证 返回中文提示 全局设置
<?php return [ /* |-------------------------------------------------------------------------- | V ...
- 洛谷P5020 货币系统 题解 模拟
题目链接:https://www.luogu.org/problem/P5020 这道题目是一道模拟题,但是又有一点多重背包的思想在里面. 首先我们定义一个 vis[i] 来表示和为 i 的情况在之前 ...
- vue用法父组件调用子组件方法--->$refs
vue下载excel模板(放入弹框独立出来)后再导入表格 子组件 <el-dialog title="导入" :visible.sync="dialogVisibl ...
- HDU 6438"Buy and Resell"(贪心+优先级队列)
传送门 •参考资料 [1]:HDU6438(优先队列+思维) •题意 有n个城市,第 i 天你会达到第 i 个城市: 在第 i 个城市中,你可以用 ai 元购买一个物品,或者用 ai 元卖掉一个物品, ...
- vue组件中data是个函数
当我们const vm = new Vue({ el : '#app', data : { msg:‘hello World’ } })用习惯了,data是一个对象,可到了vue组件 Vue.co ...
- 【31.42%】【CF 714A】Meeting of Old Friends
time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...
- js中的克隆
1.如果克隆对象是基本类型,直接复制就可以 <script type="text/javascript"> var str1 = 'abc' var str2 = st ...
- CKEditor配置,最适合新手两种方式详解。
CKEditor.js的配置,大概有两种方式,这里有基础版和全面的版本可以试验 https://cdn.ckeditor.com/4.8.0/full-all/ckeditor.js http://c ...
- C# 文件在数据库 的 存取
... /// <summary> /// 获取数据库Image字段数据,保存到本地 /// </summary> /// <param name="sende ...
- Pandas处理缺失数据
利用pandas.DataFrame.dropna处理含有缺失值的数据 1.使用形式: DataFrame.dropna(axis=0, how='any', thresh=None, subset= ...