Spring Jpa Data + Thymeleaf + Bootstrap实现分页

目录

前言

实际上分页器或者分页组件在现实中都有广泛着的应用,近期刚好在写一个应用了Spring Data、Thymeleaf 3、Bootstrap 4 的系统,所以自己写了一个分页器,大家看看如何吧。

需求

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

  1. 显示页码的列表;

  2. 该列表的第一项是“上一页”,最后一项是“下一页”;

  3. 当前选中的页码要高亮;

  4. 当当前页的上一页没有页码可选时,则“上一页”置为不可点击的状态;

  5. 当当前页的下一页没有页码可选时,则“下一页”置为不可点击的状态;

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

0.jpg

说说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 作为模版引擎,其好处就是可以绑定数据源,并且根据数据源来渲染页面。最爽的莫过于根据绑定的数据列表来遍历生成页面元素,比如:

<div>
    <ul data-am-widget="pagination" class="am-pagination am-pagination-default" style="text-align: center">
        <li class="am-pagination-first ">
            <a href="?page=1" class="">第一页</a>
        </li>
        <li th:if="${dataList.number > 0}" class="am-pagination-prev ">
            <a th:href="@{?page={page}(page=${dataList.number})}" class="">上一页</a>
        </li>
        <li th:each="i : ${#numbers.sequence(1, dataList.totalPages)}"
            th:classappend="${(dataList.number + 1) eq i} ? 'am-active' : ''">
            <a th:href="@{?page={page}(page=${i})}"
               th:text="${i}" class="">1</a>
        </li>
        <li th:unless="${dataList.number + 1 == dataList.totalPages}" class="am-pagination-next ">
            <a th:href="@{?page={page}(page=${dataList.number} + 2)}" class="">下一页</a>
        </li>
        <li class="am-pagination-last ">
            <a th:href="@{?page={page}(page=${dataList.totalPages})}" class="">最末页</a>
        </li>
    </ul>
</div>

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

考虑的再多一点

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

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

  1. 当当前页页码接近首页时,省略号在后部出现;

  2. 当当前页页码接最后页时,省略号在前部出现;

  3. 最烦的要属于,当当前页在中部时,前部、后部都需要省略号。

带省略号的分页器

马上行动起来,大致的把算法画了个草图:

1.jpg

为求简单,我们预设页码的列表最多在 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);" 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>

最终版本

<ul th:if="${dataList.totalPages le 7}" data-am-widget="pagination" class="am-pagination am-pagination-default" style="text-align: center">
        <li th:if="${dataList.number > 0}" class="am-pagination-prev ">
            <a th:href="@{?page={page}(page=${dataList.number})}" class="">上一页</a>
        </li>
        <li th:each="i : ${#numbers.sequence(1, dataList.totalPages)}"
            th:classappend="${(dataList.number + 1) eq i} ? 'am-active' : ''">
            <a th:href="@{?page={page}(page=${i})}"
               th:text="${i}" class="">1</a>
        </li>
        <li th:unless="${dataList.number + 1 == dataList.totalPages}" class="am-pagination-next ">
            <a th:href="@{?page={page}(page=${dataList.number} + 2)}" class="">下一页</a>
        </li>
    </ul>
    <ul th:if="${dataList.totalPages gt 7}" data-am-widget="pagination" class="am-pagination am-pagination-default" style="text-align: center">
        <!-- 上一页 -->
        <li th:classappend="*{first} ? 'disabled' : ''" th:if="${dataList.number > 0}" class="am-pagination-prev ">
            <a th:href="@{?page={page}(page=${dataList.number - 2})}">上一页</a>
        </li>
        <li class="am-pagination-first" th:classappend="${(dataList.number + 1) eq 1} ? 'am-active' : ''">
            <a th:href="@{?page=1}">1</a>
        </li>
        <!-- 当前页面小于等于4 -->
        <li th:if="${(dataList.number + 1) le 4}" th:each="i : ${#numbers.sequence(2,5)}"
            th:classappend="${(dataList.number + 1) eq i} ? 'am-active' : ''" >
            <a th:href="@{?page={page}(page=${i})}">
                <span th:text="${i}"></span>
            </a>
        </li>
        <li th:if="${(dataList.number + 1) le 4}">
            <a href="javascript:void(0);">
                <span aria-hidden="true">...</span>
            </a>
        </li>
        <!-- 最后一页与当前页面之差,小于等于3 -->
        <li th:if="${(dataList.totalPages-(dataList.number + 1)) le 3}">
            <a href="javascript:void(0);" >
                <span aria-hidden="true">...</span>
            </a>
        </li>
        <li th:if="${(dataList.totalPages-(dataList.number + 1)) le 3}" th:each="i : ${#numbers.sequence(dataList.totalPages-4, dataList.totalPages-1)}"
            th:classappend="${(dataList.number + 1) eq i} ? 'am-active' : ''" >
            <a th:href="@{?page={page}(page=${i})}">
                <span th:text="${i}"></span>
            </a>
        </li>
        <!-- 最后一页与当前页面之差大于3,且  当前页面大于4-->
        <li th:if="${((dataList.number + 1) gt 4) && ((dataList.totalPages-(dataList.number + 1)) gt 3 )}">
            <a href="javascript:void(0);">
                <span aria-hidden="true">...</span>
            </a>
        </li>
        <li th:if="${((dataList.number + 1) gt 4) && ((dataList.totalPages-(dataList.number + 1)) gt 3 )}"
            th:classappend="${(dataList.number + 1) eq (dataList.number + 1)} ? 'am-active' : ''">
            <a th:href="@{?page={page}(page=${dataList.number+1})}" th:text="${dataList.number+1}">number</a>
        </li>
        <li th:if="${((dataList.number + 1) gt 4) && ((dataList.totalPages-(dataList.number + 1)) gt 3 )}">
            <a th:href="@{?page={page}(page=${dataList.number+2})}" th:text="${dataList.number+2}">number</a>
        </li>
        <li th:if="${((dataList.number + 1) gt 4) && ((dataList.totalPages-(dataList.number + 1)) gt 3 )}">
            <a th:href="@{?page={page}(page=${dataList.number+3})}" th:text="${dataList.number+3}">number</a>
        </li>

        <li th:if="${((dataList.number + 1) gt 4) && ((dataList.totalPages-(dataList.number + 1)) gt 3 )}">
            <a href="javascript:void(0);">
                <span aria-hidden="true">...</span>
            </a>
        </li>
        <!-- 最后一页 -->
        <li th:classappend="${(dataList.number + 1) eq dataList.totalPages} ? 'am-active' : ''" >
            <a th:href="@{?page={page}(page=${dataList.totalPages})}" th:text="${dataList.totalPages}">endPage</a>
        </li>
        <!-- 下一页 -->
        <li th:classappend="*{last} ? 'disabled' : ''" th:unless="${dataList.number + 1 == dataList.totalPages}">
            <a th:href="@{?page={page}(page=${dataList.number+2})}">
                <span aria-hidden="true">下一页</span>
            </a>
        </li>
    </ul>

效果图

1.png

2.png

标签: bootstrap springboot thymeleaf Spring Jpa Data

声明:本博客如无特殊说明皆为原创,转载请注明来源:Spring Jpa Data + Thymeleaf + Bootstrap实现分页谢谢!

相关文章

发表评论:

icon_question.pngicon_razz.pngicon_sad.pngicon_evil.pngicon_exclaim.pngicon_smile.pngicon_redface.pngicon_biggrin.pngicon_surprised.pngicon_eek.pngicon_confused.pngicon_cool.pngicon_lol.pngicon_mad.pngicon_twisted.pngicon_rolleyes.pngicon_wink.pngicon_idea.pngicon_arrow.pngicon_neutral.pngicon_cry.pngicon_mrgreen.png