Thymeleaf+bootstrap實現簡單分頁
阿新 • • 發佈:2019-01-03
做專案時候,想找一個簡單的分頁程式碼,懶得用前端框架和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>