通用分页的前端实现

目录

一、前言

二、改造PageBean

三、定义通用分页标签

四、使用测试

---

一、前言

继承上一篇文章，我们讲了如何编写通用分页的后台代码，只有后台打印测试，

不清楚如何编写通用分页后台代码的建议先去参考一下俺上一篇文章噢，

而这篇文章则是来一起实现一下通用分页的前端展示~

好啦，话就不多说了，开始！

---

二、改造PageBean

原本的那个分页属性类PageBean已经不足以满足我们的需求了，所有我们第一步就是想来改造一下PageBean:

2.1 分析分页核心

我们来分析一下分页的核心：

根据上面的分析，我们得出一些结论需要为PageBean添加这些属性：

//需要新增变量：保存上一次查询条件

//需要新增变量：保存上一次请求地址
    
//需要添加方法：获取最大页码
//需要添加方法：获取下一页的页码
//需要添加方法：获取上一页的页码
//需要添加方法：初始化PageBean

封装好这些属性并且添加这些方法后的PageBean代码双手奉上：

package com.leaf.util;

import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

/**
 * 分页工具类
 * 需要新增变量：保存上一次查询条件
 * 需要新增变量：保存上一次请求地址
 * 需要添加方法：获取最大页码
 * 需要添加方法：获取下一页的页码
 * 需要添加方法：获取上一页的页码
 * 需要添加方法：初始化PageBean
 * @author Leaf
 *
 * 2022年6月22日 上午11:41:03
 */
public class PageBean {

	private int page = 1;// 页码

	private int rows = 3;// 页大小

	private int total = 0;// 总记录数

	private boolean pagination = true;// 是否分页
	
	private String url;//保存上一次请求地址
	
	//保存上一次的所有查询条件
	private Map<String, String[]> map = new HashMap<String, String[]>();
	
	//获取最大页码
	public int getMaxPage() {
		return this.total % this.rows == 0 ? 
			   this.total / this.rows : 
			   this.total / this.rows + 1;
	}
	
	//获取下一页的页码
	public int getNextPage() {
		return this.page < this.getMaxPage() ? 
			   this.page +1 : this.page;
	}
	
	//获取上一页的页码
	public int getBackPage() {
		return this.page > 1 ? 
			   this.page -1 : this.page;
	}
	
	//初始化PageBean
	public void setRequest(HttpServletRequest req) {
		this.setPage(req.getParameter("page"));
		this.setRows(req.getParameter("rows"));
		this.setPagination(req.getParameter("pagination"));
		this.setUrl(req.getRequestURL().toString());
		this.setMap(req.getParameterMap());
	}
	
	private void setPagination(String pagination) {
		if(StringUtils.isNotBlank(pagination)) {
			this.setPagination(!"false".equals(pagination));
		}
	}

	private void setRows(String rows) {
		if(StringUtils.isNotBlank(rows)) {
			this.setRows(Integer.valueOf(rows));
		}
	}

	private void setPage(String page) {
		if(StringUtils.isNotBlank(page)) {
			this.setPage(Integer.valueOf(page));
		}
	}
	
	public PageBean() {
		super();
	}

	public String getUrl() {
		return url;
	}

	public void setUrl(String url) {
		this.url = url;
	}

	public Map<String, String[]> getMap() {
		return map;
	}

	public void setMap(Map<String, String[]> map) {
		this.map = map;
	}

	public int getPage() {
		return page;
	}

	public void setPage(int page) {
		this.page = page;
	}

	public int getRows() {
		return rows;
	}

	public void setRows(int rows) {
		this.rows = rows;
	}

	public int getTotal() {
		return total;