SpringBoot+Thymeleaf+BootStrap4实现带有省略号的分页

思路如下

当总页数小于等于7时

1

2

3

4

5

6

7

 

 

当总页数大于7时

 

（1）当前页面小于等于4

1

2

3

4

5

...

n

 

（2） 最后一页与当前页面之差小于等于3

1

...

n-4

n-2

n-2

n-1

n

 

（3）最后一页与当前页面之差大于3 且当前页面大于4 ,index指当前页面

1

...

index-1

index

index+1

...

n

代码如下：

<div class="row">
        <div class="offset-md-3 col-md-7">

            <!-- 处理页数小于等于7 的情况 -->
            <ul th:if="${(totalPages le 7)&&(totalPages gt 0)}" class="pagination">
                <li th:if="${pageIndex eq 1}" class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
                <li th:if="${pageIndex gt 1}" class="page-item">
                    <a class="page-link" th:href="@{/users(pageIndex=${pageIndex}-1,size=${size})}">上一页</a>
                </li>

                <li th:each="index:${#numbers.sequence(1,totalPages)}" th:classappend="${index eq pageIndex}?'active'" class="page-item">
                    <a th:href="@{/users(pageIndex=${index},size=${size})}" class="page-link"  th:text="${index}"></a>
                </li>

                <li th:if="${pageIndex eq totalPages}" class="page-item disabled"><a class="page-link" href="#">下一页</a></li>
                <li th:if="${pageIndex lt totalPages}" class="page-item">
                    <a class="page-link" th:href="@{/users(pageIndex=${pageIndex}+1,size=${size})}">下一页</a>
                </li>
            </ul>

            <!-- 处理页数大于7 的情况 -->
            <ul th:if="${totalPages gt 7}" class="pagination">
                <li th:if="${pageIndex eq 1}" class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
                <li th:if="${pageIndex gt 1}" class="page-item">
                    <a class="page-link" th:href="@{/users(pageIndex=${pageIndex}-1,size=${size})}">上一页</a>
                </li>

                <!-- 首页 -->
                <li th:classappend="${pageIndex eq 1}?'active'" class="page-item">
                    <a class="page-link" th:href="@{/users(pageIndex=1,size=${size})}">1</a>
                </li>

                <!-- 当前页面小于等于4 -->
                <li th:if="${pageIndex le 4}" th:each="index:${#numbers.sequence(2,5)}" th:classappend="${index eq pageIndex}?'active'" class="page-item">
                    <a th:href="@{/users(pageIndex=${index},size=${size})}" class="page-link"  th:text="${index}"></a>
                </li>
                <li th:if="${pageIndex le 4}" class="page-item">
                    <a  class="page-link" th:href="@{/users(pageIndex=6,size=${size})}">...</a>
                </li>

                <!-- 最后一页与当前页面之差小于等于3 -->
                <li th:if="${totalPages-pageIndex le 3}" class="page-item">
                    <a  class="page-link" th:href="@{/users(pageIndex=${totalPages-5},size=${size})}">...</a>
                </li>
                <li th:if="${totalPages-pageIndex le 3}" th:each="index:${#numbers.sequence(totalPages-4,totalPages-1)}" th:classappend="${index eq pageIndex}?'active'" class="page-item">
                    <a th:href="@{/users(pageIndex=${index},size=${size})}" class="page-link"  th:text="${index}"></a>
                </li>

                <!-- 最后一页与当前页面之差大于3 且当前页面大于4 -->
                <li th:if="${(pageIndex gt 4) && (totalPages-pageIndex gt 3)}" class="page-item">
                    <a class="page-link" th:href="@{/users(pageIndex=${pageIndex-2},size=${size})}">...</a>
                </li>
                <li th:if="${(pageIndex gt 4) && (totalPages-pageIndex gt 3)}" th:each="index:${#numbers.sequence(pageIndex-1,pageIndex+1)}" th:classappend="${index eq pageIndex}?'active'" class="page-item">
                    <a class="page-link" th:href="@{/users(pageIndex=${index},size=${size})}" th:text="${index}"></a>
                </li>
                <li th:if="${(pageIndex gt 4) && (totalPages-pageIndex gt 3)}" class="page-item">
                    <a class="page-link" th:href="@{/users(pageIndex=${pageIndex+2},size=${size})}">...</a>
                </li>

                <!-- 尾页 -->
                <li th:classappend="${pageIndex eq totalPages}?'active'" class="page-item">
                    <a class="page-link" th:href="@{/users(pageIndex=${totalPages},size=${size})}" th:text="${totalPages}">尾页</a>
                </li>

                <li th:if="${pageIndex eq totalPages}" class="page-item disabled"><a class="page-link" href="#">下一页</a></li>
                <li th:if="${pageIndex lt totalPages}" class="page-item">
                    <a class="page-link" th:href="@{/users(pageIndex=${pageIndex}+1,size=${size})}">下一页</a>
                </li>

                <div class="input-group" style="height: 38px;width: 150px;">
                    <input type="number" min="1" th:max="${totalPages}" th:value="${pageIndex}" class="form-control toPage">
                    <div class="input-group-append">
                        <button type="button" class="btn btn-primary toUrl">跳转</button>
                    </div>
                </div>

            </ul>
        </div>
    </div>