用thymeleaf进行分页展示数据
时间: 2023-06-12 21:06:29 浏览: 119
Thymeleaf是一个用于Web和独立环境的现代服务器端Java模板引擎,它可以与Spring框架无缝集成。在Thymeleaf中展示分页数据需要以下步骤:
1. 在Controller层获取分页数据,并将数据存入Model对象中。
2. 在HTML页面中添加thymeleaf的命名空间:xmlns:th="http://www.thymeleaf.org"。
3. 在HTML页面中添加分页组件,可以使用Bootstrap等前端框架提供的分页组件,或者自己编写分页组件。
4. 在HTML页面中使用th:each遍历分页数据,并在分页组件中展示数据。
下面是一个使用Thymeleaf展示分页数据的示例:
Controller层代码:
```
@GetMapping("/users")
public String listUsers(Model model, @RequestParam(defaultValue = "0") int page) {
Pageable pageable = PageRequest.of(page, 10, Sort.by("id").descending());
Page<User> userPage = userRepository.findAll(pageable);
model.addAttribute("users", userPage.getContent());
model.addAttribute("currentPage", page);
model.addAttribute("totalPages", userPage.getTotalPages());
return "userList";
}
```
HTML页面代码:
```
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>User List</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>User List</h1>
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr th:each="user : ${users}">
<td th:text="${user.id}"></td>
<td th:text="${user.name}"></td>
<td th:text="${user.email}"></td>
</tr>
</tbody>
</table>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item" th:classappend="${currentPage == 0} ? disabled : ''">
<a class="page-link" th:href="@{/users(page=0)}">First</a>
</li>
<li class="page-item" th:classappend="${currentPage == 0} ? disabled : ''">
<a class="page-link" th:href="@{/users(page=${currentPage - 1})}">Previous</a>
</li>
<li class="page-item" th:classappend="${currentPage == totalPages - 1} ? disabled : ''">
<a class="page-link" th:href="@{/users(page=${currentPage + 1})}">Next</a>
</li>
<li class="page-item" th:classappend="${currentPage == totalPages - 1} ? disabled : ''">
<a class="page-link" th:href="@{/users(page=${totalPages - 1})}">Last</a>
</li>
</ul>
</nav>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
</body>
</html>
```
在该示例中,使用Bootstrap提供的分页组件展示分页数据,并使用th:classappend属性动态添加disabled类,禁用上一页和下一页按钮。使用th:href属性动态生成分页链接。
阅读全文