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

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

原文同步至https://waylau.com/spring-data-thymeleaf-bootstrap-paginator


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

分页器有哪些需求

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

  • 显示页码的列表;
  • 该列表的第一项是“上一页”,最后一项是“下一页”;
  • 当前选中的页码要高亮;
  • 当当前页的上一页没有页码可选时,则“上一页”置为不可点击的状态;
  • 当当前页的下一页没有页码可选时,则“下一页”置为不可点击的状态;

我们很容易就能找到一个 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);" 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);">
             <span data-th-text="${i}"></span>
        </a>
    </li>
    
    <!-- 下一页 -->
    <li class="page-item" data-th-classappend="*{last} ? 'disabled' : ''">
        <a href="javascript:void(0);" 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)。

考虑的再多一点

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

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

  • 当当前页页码接近首页时,省略号在后部出现;
  • 当当前页页码接最后页时,省略号在前部出现;
  • 最烦的要属于,当当前页在中部时,前部、后部都需要省略号;

带省略号的分页器

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

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

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

实现方式如下:

    <!-- 处理页数大于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);" 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);" 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);" 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);" 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);" 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);" 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);" 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);" 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);" 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);" 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);" 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);" 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);" class="page-link" data-th-attr="pageIndex=${page.number} + 1" aria-label="Next">
                <span aria-hidden="true">»</span>
            </a>
        </li>
    </ul>

还要再考虑的多一点?

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

  • 是否可以选择页面的最大页?
  • 是否可以选择任意页面的索引?
  • ...

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

参考文献

目录
相关文章
存储 JSON Java
227 0
|
1月前
|
SQL Java 数据库连接
Spring Data JPA 技术深度解析与应用指南
本文档全面介绍 Spring Data JPA 的核心概念、技术原理和实际应用。作为 Spring 生态系统中数据访问层的关键组件,Spring Data JPA 极大简化了 Java 持久层开发。本文将深入探讨其架构设计、核心接口、查询派生机制、事务管理以及与 Spring 框架的集成方式,并通过实际示例展示如何高效地使用这一技术。本文档约1500字,适合有一定 Spring 和 JPA 基础的开发者阅读。
147 0
|
3月前
|
缓存 JSON 前端开发
第07课:Spring Boot集成Thymeleaf模板引擎
第07课:Spring Boot集成Thymeleaf模板引擎
407 0
第07课:Spring Boot集成Thymeleaf模板引擎
|
3月前
|
NoSQL Java Redis
Redis基本数据类型及Spring Data Redis应用
Redis 是开源高性能键值对数据库,支持 String、Hash、List、Set、Sorted Set 等数据结构,适用于缓存、消息队列、排行榜等场景。具备高性能、原子操作及丰富功能,是分布式系统核心组件。
406 2
|
5月前
|
消息中间件 缓存 NoSQL
基于Spring Data Redis与RabbitMQ实现字符串缓存和计数功能(数据同步)
总的来说,借助Spring Data Redis和RabbitMQ,我们可以轻松实现字符串缓存和计数的功能。而关键的部分不过是一些"厨房的套路",一旦你掌握了这些套路,那么你就像厨师一样可以准备出一道道饕餮美食了。通过这种方式促进数据处理效率无疑将大大提高我们的生产力。
196 32
|
6月前
|
SQL 前端开发 Java
深入理解 Spring Boot 项目中的分页与排序功能
本文深入讲解了在Spring Boot项目中实现分页与排序功能的完整流程。通过实际案例,从Service层接口设计到Mapper层SQL动态生成,再到Controller层参数传递及前端页面交互,逐一剖析每个环节的核心逻辑与实现细节。重点包括分页计算、排序参数校验、动态SQL处理以及前后端联动,确保数据展示高效且安全。适合希望掌握分页排序实现原理的开发者参考学习。
355 4
|
6月前
|
NoSQL 安全 Java
深入理解 RedisConnectionFactory:Spring Data Redis 的核心组件
在 Spring Data Redis 中,`RedisConnectionFactory` 是核心组件,负责创建和管理与 Redis 的连接。它支持单机、集群及哨兵等多种模式,为上层组件(如 `RedisTemplate`)提供连接抽象。Spring 提供了 Lettuce 和 Jedis 两种主要实现,其中 Lettuce 因其线程安全和高性能特性被广泛推荐。通过手动配置或 Spring Boot 自动化配置,开发者可轻松集成 Redis,提升应用性能与扩展性。本文深入解析其作用、实现方式及常见问题解决方法,助你高效使用 Redis。
591 4
|
6月前
|
前端开发 Java UED
从基础到进阶:Spring Boot + Thymeleaf 整合开发中的常见坑与界面优化
本文深入探讨了 **Spring Boot + Thymeleaf** 开发中常见的参数绑定问题与界面优化技巧。从基础的 Spring MVC 请求参数绑定机制出发,分析了 `MissingServletRequestParameterException` 的成因及解决方法,例如确保前后端参数名、类型一致,正确设置请求方式(GET/POST)。同时,通过实际案例展示了如何优化支付页面的视觉效果,借助简单的 CSS 样式提升用户体验。最后,提供了官方文档等学习资源,帮助开发者更高效地掌握相关技能。无论是初学者还是进阶用户,都能从中受益,轻松应对项目开发中的挑战。
231 0
|
6月前
|
SQL Java 编译器
深入理解 Spring Data JPA 的导入与使用:以 UserRepository为例
本文深入解析了 Spring Data JPA 中 `UserRepository` 的导入与使用。通过示例代码,详细说明了为何需要导入 `User` 实体类、`JpaRepository` 接口及 `@Repository` 注解。这些导入语句分别用于定义操作实体、提供数据库交互方法和标识数据访问组件。文章还探讨了未导入时的编译问题,并展示了实际应用场景,如用户保存、查询与删除操作。合理使用导入语句,可让代码更简洁高效,充分发挥 Spring Data JPA 的优势。
364 0
|
7月前
|
JSON 前端开发 Java
微服务——SpringBoot使用归纳——Spring Boot集成Thymeleaf模板引擎——Thymeleaf 的使用
本文介绍了 Thymeleaf 在 Spring Boot 项目中的使用方法,包括访问静态页面、处理对象和 List 数据、常用标签操作等内容。通过示例代码展示了如何配置 404 和 500 错误页面,以及如何在模板中渲染对象属性和列表数据。同时总结了常用的 Thymeleaf 标签,如 `th:value`、`th:if`、`th:each` 等,并提供了官方文档链接以供进一步学习。
493 0
微服务——SpringBoot使用归纳——Spring Boot集成Thymeleaf模板引擎——Thymeleaf 的使用