请给我一个模板,告诉应该怎么使用thymeleaf在前后端写分页
时间: 2024-09-15 22:11:59 浏览: 40
Spring Boot+Mybatis-Plus+Thymeleaf+Bootstrap分页页查询(前后端都有).zip
在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>
<!-- 当前内容区域,通过model中的pageItems动态渲染 -->
<div id="content-container">
<h2>列表页({{ #{page.of} }} {{ currentPage }}/{{ totalPages }})</h2>
<ul th:each="item : ${pageItems}">
<li th:text="${item.title}"></li>
</ul>
</div>
<!-- 后端Java控制器部分(假设用Spring MVC) -->
<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`函数用于前端跳转到指定的页面。
阅读全文