spriungboot2.0.6 bootstrap4.0.0 thymeleaf分頁
阿新 • • 發佈:2018-11-25
最終效果圖 ,差不多就這樣
匯入pom依賴的分頁外掛(bootstrap 和 thymeleaf 我就不寫了)
|
PageInfo屬性解釋
//似乎不完整 total 總記錄數 List<T>list 結果集(每頁顯示的資料) |
獲取所有資料(註解版的mybatis)
|
controller:(注意塗顏色的地方)
@GetMapping("/stuList") Model model) { //pageSize:當前頁面顯示資料條數 PageHelper.startPage(pn, 10); List<User> users = userService.findUserList(); //navigatePages:導航欄頁碼數 return new ModelAndView("admin/studentList", "pageInfo", pageInfo); |
顯示頁(注意紅色地方,)
<div class="row"> <div class="col-md-6"> <h5>當前第[[${pageInfo.pageNum }]]頁,總[[${pageInfo.pages }]]頁,總[[${pageInfo.total }]]條記錄 </h5> </div> <div class="col-md-6"> <nav aria-label="Page navigation"> <ul class="pagination"> <!--首頁 和 上一頁--> <li> <a th:href="@{/stuList}" class="btn btn-sm"> 首頁 </a> </li> <th:if test="${pageInfo.hasPreviousPage - 1} > 0"> <li> <a th:href="@{/stuList(pn=${pageInfo.pageNum - 1})}" aria-label="Previous" class="btn btn-sm" data-th-classappend="${(pageInfo.pageNum - 1) eq 0} ? 'disabled' : ''"> < </a> </li> </th:if> <!--迭代生成頁碼--> <li> <a th:each="i:${pageInfo.navigatepageNums}" th:href="@{/stuList(pn=${i})}" th:text="${i}" class="btn btn-sm" data-th-classappend="${(pageInfo.pageNum) eq i} ? 'btn-info' : ''"> </a> </li> <!--下一頁 和 末頁--> <th:if test="${pageInfo.hasNextPage }"> <li> <a aria-label="Next" class="btn btn-sm" th:href="@{/stuList(pn=${pageInfo.pageNum + 1})}" data-th-classappend="${(pageInfo.pageNum) eq (pageInfo.pages)} ? 'disabled' : ''"> > </a> </li> </th:if> <li> <a th:href="@{/stuList(pn=${pageInfo.pages})}" class="btn btn-sm"> 末頁 </a> </li> </ul> </nav> </div> </div> |
淡紫色的地方是對上一頁和下一頁的判斷是否禁用
到此如果順利的話就大功告成了