/*** 分頁相關信息*/ public class Page {//當前頁碼private int current=1;//顯示的上限private int limit=10;//數據總數//用于計算頁數private int rows;//路徑private String path;public int getCurrent() {return current;}public void setCurrent(int current) {if (current >= 1) {this.current = current;}}public int getLimit() {return limit;}public void setLimit(int limit) {if (limit >= 1 && limit<=100) {this.limit = limit;}}public int getRows() {return rows;}public void setRows(int rows) {if(rows>=0){this.rows = rows;}}public String getPath() {return path;}public void setPath(String path) {this.path = path;}/*** 獲取起始行* @return*/public int getOffset(){return (current-1)*limit;}/*** 獲取起始頁碼** @return*/public int getFrom() {int from = current - 2;return from < 1 ? 1 : from;}/*** 獲取結束頁碼** @return*/public int getTo() {int to = current + 2;int total = getTotal();return to > total ? total : to;}/*** 獲取總頁數** @return*/public int getTotal() {// rows / limit [+1]if (rows % limit == 0) {return rows / limit;} else {return rows / limit + 1;}} } @RequestMapping(path = "/index", method = RequestMethod.GET)public String getIndexPage(Model model, Page page,@RequestParam(name = "orderMode", defaultValue = "0") int orderMode) {// 方法調用前,SpringMVC會自動實例化Model和Page,并將Page注入Model.// 所以,在thymeleaf中可以直接訪問Page對象中的數據.page.setRows(discussPostService.findDiscussPostRows(0));page.setPath("/index?orderMode=" + orderMode);List<DiscussPost> list = discussPostService.findDiscussPosts(0, page.getOffset(), page.getLimit(),orderMode);List<Map<String, Object>> discussPosts = new ArrayList<>();......model.addAttribute("discussPosts", discussPosts);model.addAttribute("orderMode", orderMode);return "/index";}

?

<!-- 分頁 --><nav class="mt-5" th:if="${page.rows>0}" th:fragment="pagination"><ul class="pagination justify-content-center"><li class="page-item"><a class="page-link" th:href="@{${page.path}(current=1)}">首頁</a></li><li th:class="|page-item ${page.current==1?'disabled':''}|"><a class="page-link" th:href="@{${page.path}(current=${page.current-1})}">上一頁</a></li><li th:class="|page-item ${i==page.current?'active':''}|" th:each="i:${#numbers.sequence(page.from,page.to)}"><a class="page-link" th:href="@{${page.path}(current=${i})}" th:text="${i}">1</a></li><li th:class="|page-item ${page.current==page.total?'disabled':''}|"><a class="page-link" th:href="@{${page.path}(current=${page.current+1})}">下一頁</a></li><li class="page-item"><a class="page-link" th:href="@{${page.path}(current=${page.total})}">末頁</a></li></ul></nav>

總結

以上是生活随笔為你收集整理的后端 分页组件实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。