【精品】Thymeleaf 分页模板

清疚 2022-08-29 10:52 165阅读 0赞

## 效果![请添加图片描述][3cabbb4f22ca499fb33817833d60ea61.gif]\#\# 分页模板 ##

在resources/common目录下创建文件\_page.html，然后编写其代码为：

<ul class="pagination" th:fragment="page_pager(number, offset, totalPages, url)" th:with="maxButtons=10,floatButtons=5" xmlns:th="http://www.thymeleaf.org">
 
 <li th:if="${number == 1}">上一页</li>
 <li th:if="${number > 1}"><a th:href="@{${url}(pageNum=${number+offset-1})}">上一页</a></li>
 
 
 <li th:if="${number == 1}" class="active">1</li>
 <li th:if="${number > 1}"><a th:href="@{${url}(pageNum=${1+offset})}">1</a></li>
 
 <th:block th:if="${totalPages>2 && totalPages<=maxButtons}" th:each="i : ${#numbers.sequence(2,totalPages-1)}">
 <li th:if="${number == i}" class="active">页码</li>
 <li th:if="${number != i}"><a th:href="@{${url}(pageNum=${i+offset})}" th:text="${i}">页码</a></li>
 </th:block>
 
 <th:block th:if="${totalPages > maxButtons}">
 <th:block th:if="${(number-(floatButtons/2)) <= 2}" th:each="i : ${#numbers.sequence(2,2+floatButtons-1)}">
 <li th:if="${number == i}" class="active">页码</li>
 <li th:if="${number != i}"><a th:href="@{${url}(pageNum=${i+offset})}" th:text="${i}">页码</a></li>
 </th:block>
 
 <li th:if="${(number-(floatButtons/2))>2}">...</li>
 
 <th:block th:if="${((number-(floatButtons/2))>2) && ((number+(floatButtons/2)-(floatButtons%2==0?1:0)) < (totalPages-1))}" th:each="i : ${#numbers.sequence(number-(floatButtons/2),number+(floatButtons/2)-(floatButtons%2==0?1:0))}">
 <li th:if="${number == i}" class="active">页码</li>
 <li th:if="${number != i}"><a th:href="@{${url}(pageNum=${i+offset})}" th:text="${i}">页码</a></li>
 </th:block>
 
 
 <li th:if="${(number+(floatButtons/2)-(floatButtons%2==0?1:0)) < (totalPages-1)}">...</li>
 <th:block th:if="${(number+(floatButtons/2)-(floatButtons%2==0?1:0)) >= (totalPages-1)}" th:each="i : ${#numbers.sequence(totalPages-floatButtons,totalPages-1)}">
 <li th:if="${number == i}" class="active">页码</li>
 <li th:if="${number != i}"><a th:href="@{${url}(pageNum=${i+offset})}" th:text="${i}">页码</a></li>
 </th:block>
 </th:block>
 
 
 <li th:if="${totalPages>1 && number == totalPages}" class="active">页码</li>
 <li th:if="${totalPages>1 && number != totalPages}"><a th:href="@{${url}(pageNum=${totalPages+offset})}" th:text="${totalPages}">页码</a></li>
 
 
 <li th:if="${number >= totalPages}">下一页</li>
 <li th:if="${number < totalPages}"><a th:href="@{${url}(pageNum=${number+offset+1})}">下一页</a></li>
 </ul>

## 使用 ##

假设服务器端返回的数据为：

public class PageBean<T> { 
 /** * 每页显示的条数 */
 private long pageSize = 10;
 /** * 当前的页码 */
 private long current;
 /** * 一共有多少条记录 */
 private long total;
 /** * 一共有多少页 */
 private long pages;
 /** * 每一页所显示的数据 */
 private List<T> records;
 }

页面中调用：

[3cabbb4f22ca499fb33817833d60ea61.gif]: /images/20220829/ede93972f5a344c594b8b66d6d3341f3.png