Thymeleaf+Bootstrap封装分页组件

news2024/11/25 6:52:33

效果

在这里插入图片描述

代码

templates/components/pagination.html

<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<body>
<div class="d-flex justify-content-between align-items-center mb-3" th:fragment="pagination(current,pageSize,rows,path)">
    <th:block th:with="pages = ${rows%pageSize==0?rows/pageSize:rows/pageSize+1}">
        <div>共 <span th:text="${pages}"/> 页 <span th:text="${rows}"/> 条数据</div>
        <div>
            <!--有数据：总页数大于1-->
            <th:block th:if="${pages >= 1}">
                <ul class="col pagination mb-0">
                    <li class="page-item" th:classappend="${current == 1} ? 'disabled'">
                        <a class="page-link" th:href="@{${path}(pageNo=${current - 1})}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>

                    <!--总页数小于8-->
                    <th:block th:if="${pages < 8}" th:each="page:${#numbers.sequence(1,pages)}">
                        <li th:class="${page == current ? 'page-item active':'page-item'}">
                            <a class="page-link" th:href="@{${path}(pageNo=${page})}" th:text="${page}" th:title="|第${page}页|"></a>
                        </li>
                    </th:block>
                    <!--总页数大于等于8-->
                    <th:block th:if="${pages >= 8}">
                        <!--当前页小于5-->
                        <th:block th:if="${current < 5}">
                            <!--前4页-->
                            <th:block th:each="page:${#numbers.sequence(1,4)}">
                                <li th:class="${page == current ? 'page-item active':'page-item'}">
                                    <a class="page-link" th:href="@{${path}(pageNo=${page})}" th:text="${page}" th:title="|第${page}页|"></a>
                                </li>
                            </th:block>
                            <!--5、6页-->
                            <li class="page-item">
                                <a class="page-link" th:href="@{${path}(pageNo=5)}" title="第5页">5</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" th:href="@{${path}(pageNo=6)}" title="第6页">6</a>
                            </li>
                            <!--分隔符-->
                            <li class="page-item mx-2" disabled="">...</li>
                            <!--最后页-->
                            <li class="page-item">
                                <a class="page-link" th:href="@{${path}(pageNo=${pages})}" th:text="${pages}" th:title="|第${pages}页|"></a>
                            </li>
                        </th:block>
                        <!--当前页大于等于5-->
                        <th:block th:if="${current >= 5}">
                            <!--当前页小于等于倒数第5-->
                            <th:block th:if="${current <= pages - 5}">
                                <!--第1页-->
                                <li class="page-item">
                                    <a class="page-link" th:href="@{${path}(pageNo=1)}" title="第1页">1</a>
                                </li>
                                <!--分隔符-->
                                <li class="page-item mx-2" disabled="">...</li>
                                <!--中间5页-->
                                <li class="page-item">
                                    <a class="page-link" th:href="@{${path}(pageNo=${current - 2})}" th:text="${current - 2}" th:title="|第${current - 2}页|"></a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" th:href="@{${path}(pageNo=${current - 1})}" th:text="${current - 1}" th:title="|第${current - 1}页|"></a>
                                </li>
                                <li class="page-item active">
                                    <a class="page-link" th:href="@{${path}(pageNo=${current})}" th:text="${current}" th:title="|第${current}页|"></a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" th:href="@{${path}(pageNo=${current + 1})}" th:text="${current + 1}" th:title="|第${current + 1}页|"></a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" th:href="@{${path}(pageNo=${current + 2})}" th:text="${current + 2}" th:title="|第${current + 2}页|"></a>
                                </li>
                                <!--分隔符-->
                                <li class="page-item mx-2" disabled="">...</li>
                                <!--最后页-->
                                <li class="page-item">
                                    <a class="page-link" th:href="@{${path}(pageNo=${pages})}" th:text="${pages}" th:title="|第${pages}页|"></a>
                                </li>
                            </th:block>
                            <!--当前页大于倒数第5-->
                            <th:block th:if="${current > pages - 5}">
                                <!--第1页-->
                                <li class="page-item">
                                    <a class="page-link" th:href="@{${path}(pageNo=1)}" title="第1页">1</a>
                                </li>
                                <!--分隔符-->
                                <li class="page-item mx-2" disabled="">...</li>
                                <!--后6页-->
                                <th:block th:each="page:${#numbers.sequence(pages - 5,pages)}">
                                    <li th:class="${page == current ? 'page-item active':'page-item'}">
                                        <a class="page-link" th:href="@{${path}(pageNo=${page})}" th:text="${page}" th:title="|第${page}页|"></a>
                                    </li>
                                </th:block>
                            </th:block>
                        </th:block>
                    </th:block>
                    <li class="page-item" th:classappend="${current == pages} ? 'disabled'">
                        <a class="page-link" th:href="@{${path}(pageNo=${current + 1})}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </th:block>
        </div>
    </th:block>
</div>
</body>
</html>

使用

<div th:replace="~{components/pagination::pagination(${page.current}, ${page.size}, ${page.total}, @{/admin/user/list(name=${name},email=${email},inTime1=${inTime1},inTime2=${inTime2})})}"></div>