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}}"
bootstrap项目
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>
后台传当前页和总页数

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。