thymeleaf bootstarp分页
时间: 2024-01-15 17:04:11 浏览: 86
Thymeleaf和Bootstrap都是常用的前端技术,可以结合使用实现分页功能。下面是一种实现Thymeleaf和Bootstrap分页的方法:
1. 首先,在你的Thymeleaf模板中引入Bootstrap的样式和脚本文件。可以通过CDN引入,也可以下载到本地引入。
2. 在你的Controller中,准备好分页所需的数据。你可以使用Spring Data JPA或其他后端框架来查询数据库并获取数据列表。
3. 在Controller中,计算总页数和当前页码,并将它们传递给Thymeleaf模板。
4. 在Thymeleaf模板中,使用Bootstrap的分页组件来显示分页导航栏。你可以使用`th:each`循环来遍历页码,并设置`th:href`属性来生成分页链接。
以下是一个简单的示例:
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>分页示例</h1>
<table class="table">
<!-- 显示数据列表 -->
<!-- ... -->
</table>
<nav aria-label="Page navigation">
<ul class="pagination">
<!-- 显示页码 -->
<li class="page-item" th:classappend="${pageNumber == 1} ? disabled">
<a class="page-link" th:href="@{'?page=' + (${pageNumber} - 1)}">Previous</a>
</li>
<li class="page-item" th:classappend="${pageNumber == totalPages} ? disabled">
<a class="page-link" th:href="@{'?page=' + (${pageNumber} + 1)}">Next</a>
</li>
</ul>
</nav>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
```
请注意,上述示例中的链接地址是简化的,你需要根据你的实际情况进行相应的修改。此外,你还需要在Controller中获取当前页码和总页数,并将它们传递给Thymeleaf模板。
希望对你有所帮助!如果你有任何其他问题,请随时问我。
阅读全文