开发首页
这个比较简单
分页功能
拆解分页知道,一般分页都有(第一页、上一页、12345页、下一页、最后一页)这些功能
需要几个变量来记录保存的内容,当前页码、一页上限、数据总数、查询路径
前端要在上一页、下一页的功能中需要加入判断,如果当前页是首页,那么久没有上一页
/** * 封装分页相关的信息 */ 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 getTotal() { if (rows % limit == 0) { return rows / limit; } else { return rows / limit + 1; } } /** * 获取起始页码 * @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; } }
//前端分页代码 <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>