Community项目--实现分页功能(部分代码截取)

实现分页功能(部分代码截取)

1.样式预览

2.功能实现

java数组取值特点: 含头不含尾

• Sql: 一页10条
• select * from user limit 起始位置,查询的条数
• 第一页:
  • select * from user limit 0,10 真实下标[0-9]
• 第二页:
  • select * from user limit 10,10
• 第三页:
  • select * from user limit 20,10
• 第N页:
  • select * from user limit (n-1)*10,10

2.1. POJO

/**
 * 封装分页相关信息
 * @author XH
 * @date 2022/1/30 18:27
 */
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;
    }
}

2.2. Controller(部分)

// 方法调用之前,SpringMVC会自动实例化Model和Page,并将Page注入Model,所以,在thymeleaf中可以直接访问Page对象中的数据
page.setRows(discussPostService.findDiscussPostRows(0));
page.setPath("/index");
List<DiscussPost> list = discussPostService.findDiscussPosts(0, page.getOffset(), page.getLimit());

2.3. HTML(部分)

<nav class="mt-5" th:if="${page.rows>0}"><!--有数据才显示该区域-->
	<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)}">
		<!--numbers.sequence()返回由连续数字组成的数组-->
			<a class="page-link" th:href="@{${page.path}(current=${i})}" th:text="${i}"/>
		</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>

详细见:https://gitee.com/wxh0205/Community