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点了。顶不顺了，要睡了。各位读者朋友可以继续完善~

最终效果

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

# spring data 分页  # thymeleaf 分页  # bootstrap 分页  # 分页  # 下一页  # 上一页  # 前页  # 第二个  # 官网  # 之差  # 最多  # 当前页  # 可以看到  # 可选  # 不满意  # 可以选择  # 首页  # 绑定  # 为求  # 都是  # 都有  # 还没有  # 很好 

相关文章： 建站之星如何取消后台验证码生成？  巅云智能建站系统：可视化拖拽+多端适配+免费模板一键生成  图片制作网站免费软件,有没有免费的网站或软件可以将图片批量转为A4大小的pdf？  企业网站制作公司网页,推荐几家专业的天津网站制作公司？  太平洋网站制作公司,网络用语太平洋是什么意思？  企业网站制作费用多少,企业网站空间一般需要多大，费用是多少？  深圳网站制作案例,网页的相关名词有哪些？  一键网站制作软件,义乌购一件代发流程？  如何快速生成可下载的建站源码工具？  建站三合一如何选？哪家性价比更高？  手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站？  网站建设制作需要多少钱费用,自己做一个网站要多少钱，模板一般多少钱？  智能起名网站制作软件有哪些,制作logo的软件？  如何设计高效校园网站？  西安大型网站制作公司,西安招聘网站最好的是哪个？  建站之星备案是否影响网站上线时间？  学校为何禁止电信移动建设网站？  如何在阿里云部署织梦网站？  如何在云指建站中生成FTP站点？  如何通过西部数码建站助手快速创建专业网站？  企业在线网站设计制作流程,想建设一个属于自己的企业网站，该如何去做？  高防服务器租用首荐平台，企业级优惠套餐快速部署  如何在阿里云香港服务器快速搭建网站？  香港服务器网站卡顿？如何解决网络延迟与负载问题？  如何确认建站备案号应放置的具体位置？  义乌企业网站制作公司,请问义乌比较好的批发小商品的网站是什么？  正规网站制作公司有哪些,目前国内哪家网页网站制作设计公司比较专业靠谱？口碑好？  在线制作视频网站免费,都有哪些好的动漫网站？  广州营销型建站服务商推荐：技术优势与SEO优化解析  如何确保FTP站点访问权限与数据传输安全？  上海网站制作网页,上海本地的生活网站有哪些？最好包括生活的各个方面的？  北京网站制作费用多少,建立一个公司网站的费用.有哪些部分,分别要多少钱？  如何实现建站之星域名转发设置？  红河网站制作公司,红河事业单位身份证如何上传？  香港服务器网站搭建教程-电商部署、配置优化与安全稳定指南  高性价比服务器租赁——企业级配置与24小时运维服务  免费视频制作网站,更新又快又好的免费电影网站？  非常酷的网站设计制作软件,酷培ai教育官方网站？  宝塔新建站点报错如何解决？  教程网站设计制作软件,怎么创建自己的一个网站？  网站制作公司排行榜,抖音怎样做个人官方网站  建站之星安装提示数据库无法连接如何解决？  在线制作视频的网站有哪些,电脑如何制作视频短片？  建站IDE高效指南：快速搭建+SEO优化+自适应模板全解析  已有域名如何免费搭建网站？  杭州银行网站设计制作流程,杭州银行怎么开通认证方式？  家庭建站与云服务器建站，如何选择更优？  韩国网站服务器搭建指南：VPS选购、域名解析与DNS配置推荐  公司网站的制作公司,企业网站制作基本流程有哪些？  如何通过.red域名打造高辨识度品牌网站？