基于springboot+thymeleaf+springDataJpa自带的分页插件实现完整的动态分页
2024-09-05 18:26:22
实现百度搜索使用的前五后四原则,效果如下。
下面贴出代码,复制到前端即可,只需要域中放置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>
最新文章
- Netty(四)分隔符与定长解码器的使用
- 分布式服务框架 Zookeeper -- 管理分布式环境中的数据
- Controller中使用过滤器
- python 批量爬取代理ip
- Chapter Configuration
- IGF职业组比赛
- 转:关掉Archlinux中烦人的响铃
- Java API —— JDK5新特性
- Codevs_1230_元素查找_(set/Hash)
- vs2015中ctrl+shift+F进行“在文件中查找”,有时候无效?
- cf B Red and Blue Balls
- 生产环境 tomcat中启动缓慢
- chrome误删书签恢复。
- oc之里氏替换原则
- WordPress评论时一键填入昵称、邮箱和网址
- DBoW2应用
- 让WinSCP和Putty一直保持连接
- 今天我给你们推荐一本书《Linux就该这么学》!!!
- windows server远程连接提示“终端服务器超出了最大允许连接”
- process 多进程写法 multiprocessing