Thymeleaf+bootstrap实现简单分页

做项目时候,想找一个简单的分页代码,懒得用前端框架和json,没找到,就自己写了一份简单的

需要从后台传两个变量:

indexPage(当前页数)

totalPage(一共页数)

效果图如下:



总体思路是以当前页为中心,左边三个按钮右边三个按钮,挨个判断+页数和-页数时有没有超出范围

在第一页和最后一页时需要做一个判断,如果当前页等于1时,上一页按钮失效,当前页等于总页数时,最后一页失效


最后上代码:

模板代码基于Bootstrap

<ul class="pagination pagination-lg" >
    <li th:class="${indexPage==1}?'disabled' : ''"><a href="#">上一页</a></li>
    <li th:if="${indexPage-3 >=1}" ><a th:href="@{'admin_law_list.html?page=' + ${indexPage-3}}" th:text="${indexPage -3}" >1</a></li>
    <li th:if="${indexPage-2 >=1}" ><a th:href="@{'admin_law_list.html?page=' + ${indexPage-2}}" th:text="${indexPage -2}" >1</a></li>
    <li th:if="${indexPage-1 >=1}" ><a th:href="@{'admin_law_list.html?page=' + ${indexPage-1}}" th:text="${indexPage -1}" >1</a></li>
    <li class="active"><a href="#" th:text="${indexPage}" >1</a></li>
    <li th:if="${indexPage+1 <=totalPage}" ><a th:href="@{'admin_law_list.html?page=' + ${indexPage+1}}" th:text="${indexPage +1}" >1</a></li>
    <li th:if="${indexPage+2 <=totalPage}" ><a th:href="@{'admin_law_list.html?page=' + ${indexPage+2}}" th:text="${indexPage +2}" >1</a></li>
    <li th:if="${indexPage+3 <=totalPage}" ><a th:href="@{'admin_law_list.html?page=' + ${indexPage+3}}" th:text="${indexPage +3}" >1</a></li>

    <li th:class="${indexPage==totalPage}?'disabled' : ''" ><a href="#">下一页</a></li>
</ul><br>
后台传当前页和总页数




猜你喜欢

转载自blog.csdn.net/Lynn_coder/article/details/79919638