脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → java → spring data 分页

Spring Data + Thymeleaf 3 + Bootstrap 4 实现分页器实例代码

 更新时间：2017年05月20日 08:38:51   作者：waylau  
本篇文章主要介绍了Spring Data + Thymeleaf 3 + Bootstrap 4 实现分页器实例代码，非常具有实用价值，需要的朋友可以参考下

实际上分页器或者分页组件在现实中都有广泛着的应用，照理来说老卫没有必要单独撰文来提这茬。事实是，我近期刚好在写一门关于Spring Data、Thymeleaf 3、Bootstrap 4 的应用课程，所以用了Bootstrap 4的样式，结果之前很多例如 Bootstrap 3 的表格、分页器啊之类的插件都不能很好的兼容，百度谷歌无果，而且 Bootstrap 4 还没有出稳定版本，官网的示例也是少的可怜，最终下决心要自己写个分页器了，所用到的技术就是 Spring Data、Thymeleaf 3、Bootstrap 4 。

分页器有哪些需求

中国式报表从来都是最复杂的，随之衍生而来的分页器要求也是错综复杂。本例为求把分页器原理告诉给大家，所以，将分页组件的抽象为以下通用的内容：

  1. 显示页码的列表；
  2. 该列表的第一项是“上一页”，最后一项是“下一页”；
  3. 当前选中的页码要高亮；
  4. 当当前页的上一页没有页码可选时，则“上一页”置为不可点击的状态；
  5. 当当前页的下一页没有页码可选时，则“下一页”置为不可点击的状态；

我们很容易就能找到一个 Bootstrap 分页器的设计原型，如下图：

你可以参考 Bootstrap 官网的介绍 http://getbootstrap.com/components/#pagination，但建议你不要直接用上面的样式，因为这个样式是 Bootstrap 3版本的。 最后，我找到的了Bootstrap 4 里面的样式，却不在官网 http://www.quackit.com/bootstrap/bootstrap_4/tutorial/bootstrap_pagination.cfm。感谢 books-collection 项目带给程序员的开源、免费图书集合！

Spring Data 能做什么

org.springframework.data.domain.Page 是 Spring Data 提供的一个分页器接口，提供了常用的方法，比如：

List getContent(); // 返回分页后的数据的列表
int getTotalPages(); // 总页数
long getTotalElements(); // 总数据量
boolean isFirst(); // 是否是第一个数据；
boolean isLast(); // 是否是最后一个数据；
int getNumber(); // 当前页面索引

构造一个 Page，通常需要传入一个 org.springframework.data.domain.PageRequest.PageRequest对象，所需参数为 (int page, int size)，其中 page 就是 要请求的页面的索引，size 是页面的大小（一页最多有多少个数据）。

Spring Data 可以说提供了我们前端分页器所需要的所有元素了。

Thymeleaf 牛刀小试

Thymeleaf 作为模版引擎，其好处就是可以绑定数据源，并且根据数据源来渲染页面。最爽的莫过于根据绑定的数据列表来遍历生成页面元素，比如：

<ul class="pagination" >
 <!-- 上一页 -->
 <li class="page-item" data-th-classappend="*{first} ? 'disabled' : ''">
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link" data-th-attr="pageIndex=${page.number} - 1" aria-label="Previous">
  <span aria-hidden="true">«</span>
 </a>
 </li>
 
 <!-- 迭代生成页码 -->
 <li class="page-item" data-th-each="i : ${#numbers.sequence(1, page.totalPages)}" 
 data-th-classappend="${(page.number + 1) eq i} ? 'active' : ''" >
 <a class="page-link" data-th-attr="pageIndex=${i} - 1" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
       <span data-th-text="${i}"></span>
    </a>
 </li>
 
 <!-- 下一页 -->
 <li class="page-item" data-th-classappend="*{last} ? 'disabled' : ''">
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link" data-th-attr="pageIndex=${page.number} + 1" aria-label="Next">
  <span aria-hidden="true">»</span>
 </a>
 </li>
</ul>

这个就是简单版本的分页器了，可以看到我们的分页器的“上一页”和“下一页”是固定不变的，中间根据 totalPages（总页数）来动态生成页面。同时，我们根据是否是当前页（number + 1）来设置样式是否高亮（active）。“上一页”和“下一页”是需要做一下判断的，若当前页是第一页（first）则“上一页”不能点击（disabled）；如果当前页是最后一页（last）则“下一页”不能点击（disabled）。

考虑的再多一点

实际上，上面版本可以应付大多数的应用场景了。但是，可能会有点不完美，比如，我的页数很多怎么办？那么我们的分页列表可能被拉得很长了，领导们可能会不满意的！绝对要把这种不满意的情绪扼杀在摇篮里。

可以看到，假如要做得更加完美，则还需要考虑，当页数太多时，应该将某些用省略号。这就涉及到三种情况了：

  1. 当当前页页码接近首页时，省略号在后部出现；
  2. 当当前页页码接最后页时，省略号在前部出现；
  3. 最烦的要属于，当当前页在中部时，前部、后部都需要省略号；

带省略号的分页器

聪明的工程师们应该马上行动起来，大致的把算法画了个图：

为求简单，我们预设页码的列表最多在 7 页（你也可以根据需要来改），也就是说，当 totalPages（总页数）超过 7时，我们才需要考虑省略号的事情。

  1. “上一页”和“下一页”的算法于我们上面的简单版本类似，这里就不赘述了。
  2. 当前页面页码小于等于4时，省略号在列表后部的倒数第二个出现；
  3. 最后一页与当前页面之差小于等于3时，省略号在列表前部的第二个位置出现；
  4. 其余情况，则当前页适中处于中间位置，省略号同时在列表第二个位置及倒数第二个位置出现。

实现方式如下：

<!-- 处理页数大于7 的情况 --> 
<ul class="pagination" data-th-if="${page.totalPages gt 7}" >
 <!-- 上一页 -->
 <li class="page-item" data-th-classappend="*{first} ? 'disabled' : ''">
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link" data-th-attr="pageIndex=${page.number} - 1" aria-label="Previous">
  <span aria-hidden="true">«</span>
 </a>
 </li>
 
 <!-- 首页 -->
 <li class="page-item" data-th-classappend="${(page.number + 1) eq 1} ? 'active' : ''" >
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link" data-th-attr="pageIndex=0">1</a>
 </li>
 
 
 <!-- 当前页面小于等于4 -->
 <li class="page-item" data-th-if="${(page.number + 1) le 4}" data-th-each="i : ${#numbers.sequence(2,5)}" 
 data-th-classappend="${(page.number + 1) eq i} ? 'active' : ''" >
 <a class="page-link" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-th-attr="pageIndex=${i} - 1">
      <span data-th-text="${i}"></span>
    </a>
 </li>

 <li class="page-item disabled" data-th-if="${(page.number + 1) le 4}">
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link">
  <span aria-hidden="true">...</span>
 </a>
 </li>
 
 <!-- 最后一页与当前页面之差，小于等于3 -->
 <li class="page-item disabled" data-th-if="${(page.totalPages-(page.number + 1)) le 3}">
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link">
  <span aria-hidden="true">...</span>
 </a>
 </li> 
 <li class="page-item" data-th-if="${(page.totalPages-(page.number + 1)) le 3}" data-th-each="i : ${#numbers.sequence(page.totalPages-4, page.totalPages-1)}" 
 data-th-classappend="${(page.number + 1) eq i} ? 'active' : ''" >
 <a class="page-link" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-th-attr="pageIndex=${i} - 1">
      <span data-th-text="${i}"></span>
    </a>
 </li>
 
 <!-- 最后一页与当前页面之差大于3，且 当前页面大于4-->
 
 <li class="page-item disabled" data-th-if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}">
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link">
  <span aria-hidden="true">...</span>
 </a>
 </li> 
 <li class="page-item" data-th-if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}" >
  <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link" data-th-attr="pageIndex=${page.number}">[[${page.number}]]</a>
 </li>
 <li class="page-item active" data-th-if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}">
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link" data-th-attr="pageIndex=${page.number} + 1">[[${page.number + 1}]]</a>
 </li>
 <li class="page-item" data-th-if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}">
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link" data-th-attr="pageIndex=${page.number} + 2">[[${page.number + 2}]]</a>
 </li>
 
 <li class="page-item disabled" data-th-if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}">
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link">
  <span aria-hidden="true">...</span>
 </a>
 </li>

 <!-- 最后一页 -->
 <li class="page-item" data-th-classappend="${(page.number + 1) eq page.totalPages} ? 'active' : ''" >
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link" data-th-attr="pageIndex=${page.totalPages} - 1">[[${page.totalPages}]]</a>
 </li>

 <!-- 下一页 -->
 <li class="page-item" data-th-classappend="*{last} ? 'disabled' : ''">
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link" data-th-attr="pageIndex=${page.number} + 1" aria-label="Next">
  <span aria-hidden="true">»</span>
 </a>
 </li>
</ul>

还要再考虑的多一点？

当然，正如我们开篇所讲，中国式报表的需求千奇百怪，本文也只是从大部分通用需求出发，给个思路， 不一定能满足所有人的需求。如果可能的话，再考虑多一点，比如：

  1. 是否可以选择页面的最大页？
  2. 是否可以选择任意页面的索引？

等等，看了下表快凌晨1点了。顶不顺了，要睡了。各位读者朋友可以继续完善~

最终效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

相关文章

  • 浅谈shiro的SecurityManager类结构

    浅谈shiro的SecurityManager类结构

    下面小编就为大家带来一篇浅谈shiro的SecurityManager类结构。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Spring的定时任务@Scheduled源码详解

    Spring的定时任务@Scheduled源码详解

    这篇文章主要介绍了Spring的定时任务@Scheduled源码详解,@Scheduled注解是包org.springframework.scheduling.annotation中的一个注解,主要是用来开启定时任务,本文提供了部分实现代码与思路,需要的朋友可以参考下
    2023-09-09
  • Java性能优化之关于大对象复用的目标和注意点

    Java性能优化之关于大对象复用的目标和注意点

    这篇文章主要介绍了Java性能优化之关于大对象复用的目标和注意点,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • SpringBoot3整合SpringDoc OpenAPI生成接口文档的详细过程

    SpringBoot3整合SpringDoc OpenAPI生成接口文档的详细过程

    SpringDoc OpenAPI 是一个强大的工具,能够帮助我们轻松生成 OpenAPI 3.0 规范的文档,并提供交互式的 Swagger UI 界面,所以本文给大家介绍了SpringBoot3整合SpringDoc OpenAPI生成接口文档的详细过程,需要的朋友可以参考下
    2024-07-07
  • 如何使用Spring Security手动验证用户的方法示例

    如何使用Spring Security手动验证用户的方法示例

    这篇文章主要介绍了如何使用Spring Security手动验证用户的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • Java C++题解leetcode764最大加号标志示例

    Java C++题解leetcode764最大加号标志示例

    这篇文章主要为大家介绍了Java C++题解leetcode764最大加号标志示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • Java线程之锁对象Lock-同步问题更完美的处理方式代码实例

    Java线程之锁对象Lock-同步问题更完美的处理方式代码实例

    这篇文章主要介绍了Java线程之锁对象Lock-同步问题更完美的处理方式代码实例，还是挺不错的，这里分享给大家，需要的朋友可以参考。
    2017-11-11
  • SpringBoot中使用Redis Stream实现消息监听示例

    SpringBoot中使用Redis Stream实现消息监听示例

    本文主要介绍了SpringBoot中使用Redis Stream实现消息监听示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • Java实现添加页码到PDF文档

    Java实现添加页码到PDF文档

    页码可以清楚了解总页数、定位页数快速寻找自己所要的文段、打印时不会分不清头中尾。今天这篇文章就将介绍如何通过Java代码，以编程的方式将添加页码到PDF文档，需要的可以参考一下
    2023-04-04
  • 使用Netty进行编解码的操作过程详解

    使用Netty进行编解码的操作过程详解

    这篇文章主要介绍了使用Netty进行编解码的操作过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07

最新评论