基于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. ...
随机推荐
- meta标签、常用的文字类标签及其区别
常用的文字类基本标签 段落:p标题文字 :h1~h6超链接:a,必须属性href,后跟跳转地址图片:img,必须属性src,后跟图片地址字体斜体:em.i 文字加粗:b.strong文字下划线:u文字 ...
- H3C PPP MP配置示例一
- UVA 1347"Tour"(经典DP)
传送门 参考资料: [1]:紫书 题意: 欧几里得距离???? 题解: AC代码: #include<bits/stdc++.h> using namespace std; ; int n ...
- java 菜单
继承体系 MenuBar,Menu,MenuItem之间的关系: 先创建菜单条,再创建菜单,每一个菜单中建立菜单项. 也可以菜单添加到菜单中,作为子菜单. 通过setMenuBar()方法,将菜单添加 ...
- tomcat下的work目录和temp目录
1. tomcat下的work目录 1 用tomcat作web服务器的时候,部署的程序在webApps下,这些程序都是编译后的程序(发布到tomcat的项目里含的类,会被编译成.class后才发 ...
- ASP.NET MVC 实现页落网资源分享网站+充值管理+后台管理(13)之会员登录注册
源码下载地址:http://www.yealuo.com/Sccnn/Detail?KeyValue=c891ffae-7441-4afb-9a75-c5fe000e3d1c 会员中心,是我们与用户交 ...
- ASP.NET MVC 实现页落网资源分享网站+充值管理+后台管理(4)之业务仓储工厂
在创建业务层之前,我们先来熟悉一下业务仓储工厂Bobo.Repository.dll程序集,后续的业务操作,我们都将通过这个程序集中的方法传递数据库操作,其介于数据库操作与业务层之间,详情可前往< ...
- 深度解读 - TDD详细(测试驱动开发)
本文结构: 什么是 TDD 为什么要 TDD 怎么 TDD FAQ 学习路径 延伸阅读 什么是 TDD TDD 有广义和狭义之分,常说的是狭义的 TDD,也就是 UTDD(Unit Test Driv ...
- 与正则有关的JS方法结合其在项目中的应用
与正则有关的JS方法结合其在项目中的应用 前言 最近项目中用到正则匹配比较多,因此打算深入理解和总结下各个与正则有关的方法,再结合在项目中使用的情况.与正则有关的JS方法共有7个,分别是RegExp对 ...
- CF1214
CF1214 C题WA3发的菜鸡还能涨分 A 发现货币面值都是倍数关系,直接暴力枚举第第一种换了多少个更新答案就好了 B 按照题意模拟 C 首先,左括号的数量不等于有括号的数量一定无解 想等的话在括号 ...