Thymeleaf分页

网上找到的例子回来测试一下

<div class="table-pagination">
    <ul class="pagination">
        <li th:class="${contactsPage.number eq 0} ? 'disabled' : ''">
            <a th:if="${not contactsPage.firstPage}" th:href="@{${'/contacts'}(page=${contactsPage.number-1},size=${contactsPage.size})}">Previous</a>
            <a th:if="${contactsPage.firstPage}" href="javascript:void(0);">Previous</a>
        </li>

        <li th:each="pageNo : ${#numbers.sequence(0, contactsPage.totalPages - 1)}" th:class="${contactsPage.number eq pageNo}? 'active' : ''">
            <a th:if="${contactsPage.number  eq pageNo}" href="javascript:void(0);">
                <span th:text="${pageNo + 1}"></span>
            </a>
            <a th:if="${not (contactsPage.number  eq pageNo)}" th:href="@{${'/contacts'}(page=${pageNo},size=${contactsPage.size})}">
                <span th:text="${pageNo + 1}"></span>
            </a>

        </li>
        <li th:class="${contactsPage.number + 1 ge contactsPage.totalPages} ? 'disabled' : ''">
            <a th:if="${not contactsPage.lastPage}" th:href="@{${'/contacts'}(page=${contactsPage.number+1},size=${contactsPage.size})}">Next</a>
            <a th:if="${contactsPage.lastPage}" href="javascript:void(0);">Next</a>
        </li>
    </ul>
</div>

 

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模板。 希望对你有所帮助!如果你有任何其他问题,请随时问我。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值