首页请给我一个模板，告诉应该怎么使用thymeleaf在前后端写分页

请给我一个模板，告诉应该怎么使用thymeleaf在前后端写分页

时间: 2024-09-15 19:11:59 浏览: 44

在Thymeleaf中处理前端页面的分页通常涉及到数据绑定和迭代。以下是一个基本的模板示例，展示了如何在前后端结合时处理分页功能： ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>分页示例</title> </head> <body> <div th:fragment="pagination" th:if="${#lists.size(pageItems) > 0}">  <ul class="pagination"> <li th:classappend="${pageNumber == 1} ? 'disabled'" th:unless="${!hasPreviousPage}"> <a href="#" th:href="@{${previousPageUrl}}" aria-label="上一页">上一页</a> </li> <li th:each="pageNumber : ${(0..totalPages).list}" th:classappend="${pageNumber == currentPage} ? 'active'"> <a href="#" th:href="@{${url}?page=${pageNumber}}">${pageNumber}</a> </li> <li th:classappend="${!hasNextPage} ? 'disabled'" th:unless="${!hasNextPage}"> <a href="#" th:href="@{${nextPageUrl}}" aria-label="下一页">下一页</a> </li> </ul> </div>  <div id="content-container"> <h2>列表页({{ #{page.of} }} {{ currentPage }}/{{ totalPages }})</h2> <ul th:each="item : ${pageItems}"> <li th:text="${item.title}"></li> </ul> </div>  <script th:inline="javascript"> /*<![CDATA[*/ function goToPage(pageNumber) { var url = /*[[@{/your-endpoint?page=${pageNumber}}]]*/; // 替换为实际的API地址 window.location.href = url; } /*]]>*/ </script> </body> </html> ``` 在这个模板中，`pageItems`、`currentPage`、`totalPages`、`previousPageUrl`和`nextPageUrl`这些变量需要从后端模型（如Spring MVC的ModelAndView）中传递过来。`goToPage`函数用于前端跳转到指定的页面。

阅读全文