一套方便实用的分页设计方案 Bootstrap5 + Thymeleaf
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="">
<head>
<meta charset="UTF-8">
<title>公共页面</title>
</head>
<body>
<!--分页菜单：需要传递5个参数-->
<div class="row d-inline-flex" th:fragment="page(baseUrl,pages,current,pageSize,rows)">
<!--没有数据：总页数小于1-->
<th:block th:if="${pages < 1}">
<div class="col mx-2 text-secondary text-nowrap">
暂无数据
</div>
</th:block>
<!--有数据：只有1页-->
<th:block th:if="${pages == 1}">
<div class="col mx-2 text-secondary text-nowrap">
共有 <span th:text="${rows}"/> 条数据
</div>
</th:block>
<!--有数据：总页数大于1-->
<th:block th:if="${pages > 1}">
<ul class="col pagination mt-3 ms-4">
<!--总页数小于8-->
<th:block th:if="${pages < 8}" th:each="page:${#(1,pages)}">
<li th:class="${page == current ? 'page-item active':'page-item'}">
<a class="page-link" th:href="@{|/${baseUrl}/${page}/${pageSize}|}" 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:${#(1,4)}">
<li th:class="${page == current ? 'page-item active':'page-item'}">
<a class="page-link" th:href="@{|/${baseUrl}/${page}/${pageSize}|}" th:text="${page}" th:title="|第${page}页|"></a>
</li>
</th:block>
<!--5、6页-->
<li class="page-item">
<a class="page-link" th:href="@{|/${baseUrl}/${5}/${pageSize}|}" title="第5页">5</a>
</li>
<li class="page-item">
<a class="page-link" th:href="@{|/${baseUrl}/${6}/${pageSize}|}" title="第6页">6</a>
</li>
<!--分隔符-->
<li class="page-item mx-2" disabled="">...</li>
<!--最后页-->
<li class="page-item">
<a class="page-link" th:href="@{|/${baseUrl}/${pages}/${pageSize}|}" 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="@{|/${baseUrl}/${1}/${pageSize}|}" title="第1页">1</a>
</li>
<!--分隔符-->
<li class="page-item mx-2" disabled="">...</li>
<!--中间5页-->
<li class="page-item">
<a class="page-link" th:href="@{|/${baseUrl}/${current - 2}/${pageSize}|}" th:text="${current - 2}" th:title="|第${current - 2}页|"></a>
</li>
<li class="page-item">
<a class="page-link" th:href="@{|/${baseUrl}/${current - 1}/${pageSize}|}" th:text="${current - 1}" th:title="|第${current - 1}页|"></a>
</li>
<li class="page-item active">
<a class="page-link" th:href="@{|/${baseUrl}/${current}/${pageSize}|}" th:text="${current}" th:title="|第${current}页|"></a>
</li>
<li class="page-item">
<a class="page-link" th:href="@{|/${baseUrl}/${current + 1}/${pageSize}|}" th:text="${current + 1}" th:title="|第${current + 1}页|"></a>
</li>
<li class="page-item">
<a class="page-link" th:href="@{|/${baseUrl}/${current + 2}/${pageSize}|}" 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="@{|/${baseUrl}/${pages}/${pageSize}|}" 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="@{|/${baseUrl}/${1}/${pageSize}|}" title="第1页">1</a>
</li>
<!--分隔符-->
<li class="page-item mx-2" disabled="">...</li>
<!--后6页-->
<th:block th:each="page:${#(pages - 5,pages)}">
<li th:class="${page == current ? 'page-item active':'page-item'}">
<a class="page-link" th:href="@{|/${baseUrl}/${page}/${pageSize}|}" th:text="${page}" th:title="|第${page}页|"></a>
</li>
</th:block>
</th:block>
</th:block>
</th:block>
</ul>
<div class="col mx-2 mt-4 text-secondary text-nowrap">
共有 <span th:text="${rows}"/> 条数据
</div>
</th:block>
</div>
</body>
</html>