做项目时候,想找一个简单的分页代码,懒得用前端框架和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>后台传当前页和总页数