通用分页2（前端）

冰冰酱哈

于 2022-06-24 09:57:13 发布

阅读量77

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/m0_68211831/article/details/125434361

版权

1.改造pagebean

2.分页查询

核心思想：

1.改造pagebean

步骤：
需要新增变量保存上一次查询条件
需要新增变量保存上一次请求地址

需要添加方法：获取最大页的页码
需要添加方法：获取下一页的页码
需要添加方法：获取上一页的页码
需要新增方法：初始化pagebean

package com.xbb.util;

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

import javax.servlet.http.HttpServletRequest;

public class PageBean {

	private int page = 1;// 页码

	private int rows = 10;// 页大小

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

	private boolean pagination = true;//是否分页
//	3.需要新增变量保存上一次请求地址
	private String url ;

	//	2.需要新增变量保存上一次查询条件
	private Map<String, String[]> parameterMap = new HashMap<String ,String[]>();
	//4.需要添加方法：获取最大页的页码
	 public int maxPage() {
		 return this.total%this.rows==0?this.total/this.rows:this.total/this.rows+1;
	 }
	 //6.需要添加方法：获取上一页的页码
	 public int previouPage() {
		 
		return this.page>1?this.page-1:this.page;
		 
	 }
	 //5.需要添加方法：获取下一页的页码
	 public int nexPage() {
		return this.page< this.maxPage()?
		this.page+1:this.page;
		 
	 }
	 
//		7.需要新增方法：初始化pagebean
	 public void setRequest(HttpServletRequest req) {
		 this.setPage(req.getParameter("page"));
		 this.setRows(req.getParameter("row"));
		 this.setPagination(req.getParameter("pagination"));
		 this.setUrl(req.getRequestURL().toString());
		 this.setParameterMap(req.getParameterMap());
		 
	 }
	 

//		通用分页前端
//		1.改造pagebean
//		2.需要新增变量保存上一次查询条件
//		3.需要新增变量保存上一次请求地址
//		
//		4.需要添加方法：获取最大页的页码
//		5.需要添加方法：获取下一页的页码
//		6.需要添加方法：获取上一页的页码
//		7.需要新增方法：初始化pagebean
	 
	
	
	
	
	public  void setPage(String page) {
		if(StringUtils.isNotBlank(page))
			//set自动生产的方法
		this.setPage(Integer.valueOf(page));
	}
	
	
	private void setRows(String rows) {
		if(StringUtils.isNotBlank(rows)) {
			this.setRows(Integer.valueOf(rows));
		}
		
	}
	

	private void setPagination(String pagination) {
		if(StringUtils.isNotBlank(pagination))
			this.setPagination(!"false".equals(pagination));
		
	}
	
	
	
	
	
	public PageBean() {
		super();
	}

	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;
	}

	public void setTotal(int total) {
		this.total = total;
	}

	public void setTotal(String total) {
		this.total = Integer.parseInt(total);
	}

	public boolean isPagination() {
		return pagination;
	}

	public void setPagination(boolean pagination) {
		this.pagination = pagination;
	}

	public String getUrl() {
		return url;
	}

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

	public Map<String, String[]> getParameterMap() {
		return parameterMap;
	}

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

	
	/**
	 * 获得起始记录的下标
	 * 
	 * @return
	 */
	public int getStartIndex() {
		return (this.page - 1) * this.rows;
	}

	@Override
	public String toString() {
		return "PageBean [page=" + page + ", rows=" + rows + ", total=" + total + ", pagination=" + pagination
				+ ", url=" + url + ", parameterMap=" + parameterMap + "]";
	}
	

}

建一个servlet

package com.xbb.web;

import java.io.IOException;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.xbb.util.PageBean;
@WebServlet("/book/search")
public class BookServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	
	PageBean pageBean = new PageBean();
	pageBean.setRequest(request);
	request.setAttribute("pageBean", pageBean);
	request.getRequestDispatcher("/bookList.jsp").forward(request, response);
	
	
	}

}

建一个jsp界面进行测试：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
${pagebean }
</body>
</html>

运行结果：

2.分页查询

建一个tag----->PageTag类

package com.xbb.tag;

import java.io.IOException;
import java.util.Map;
import java.util.Map.Entry;
import java.util.Set;

import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.tagext.BodyTagSupport;

import com.xbb.util.PageBean;

public class PageTag extends BodyTagSupport{
	private static final long serialVersionUID = 1L;
	private PageBean pageBean;
	
	public PageBean getPageBean() {
		return pageBean;
	}

	public void setPageBean(PageBean pageBean) {
		this.pageBean = pageBean;
	}

	@Override
	public int doStartTag() throws JspException {
		JspWriter out = pageContext.getOut();
		try {
			
			out.print(toHTML());
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return super.doStartTag();
	}

	private String toHTML() {
		StringBuffer sb = new StringBuffer();
		//隐藏的form表单，作用保存上一次的查询条件
		sb.append("  <form action='"+pageBean.getUrl()+"' id='pageBeanForm' method='post'>");
		sb.append("  <input type='hidden' name='page' value=''>");
		Map<String, String[]> parameterMap = pageBean.getParameterMap();
		if(parameterMap!=null&&parameterMap.size()>0) {
			Set<Entry<String, String[]>> entrySet = parameterMap.entrySet();
			for (Entry<String, String[]> entry : entrySet) {
				String key = entry.getKey();
				String[] values = entry.getValue();
				if(!"page".equals(key)) {
					for (String value : values) {
						sb.append("  <input type='hidden' name='"+key+"' value='"+value+"'>");
						
					}
				}
			}
		}
		
		sb.append("  </form>");
		
		//分页条
		sb.append("<ul class=\"pagination justify-content-center\">");
		sb.append(" <li class=\"page-item\"><a class=\"page-link\"");
		sb.append(" href='javascript:gotoPage(1)'>首页</a></li>");
		sb.append(" <li class=\"page-item\"><a class=\"page-link\"");
		sb.append(" href='javascript:gotoPage("+pageBean.previouPage()+")'>&lt;</a></li>");
		sb.append(" <li class=\"page-item active\"><a class=\"page-link\" href=\"#\">"+pageBean.getPage()+"</a></li>");
		sb.append(" <li class=\"page-item disabled\"><a class=\"page-link\" href='javascript:gotoPage("+pageBean.nexPage()+")'>&gt;</a></li>");
		sb.append(" <li class=\"page-item disabled\"><a class=\"page-link\" href='javascript:gotoPage("+pageBean.maxPage()+")'>尾页</a></li>");
		sb.append(" <li class=\"page-item go-input\"><b>到第</b><input class=\"page-link\"");
		sb.append(" type=\"text\" id=\"skipPage\" name='' /><b>页</b></li>");
		sb.append(" <li class=\"page-item go\"><a class=\"page-link\"");
		sb.append(" href=\"javascript:skipPage()\">确定</a></li>");
		sb.append(" <li class=\"page-item\"><b>"+pageBean.getTotal()+"</b></li>");
		sb.append(" </ul>");
		
		
		
		//分页js代码
		sb.append(" <script type='text/javascript'>");
		sb.append(" function gotoPage(page) {");
		sb.append(" document.getElementById('pageBeanForm').page.value = page;");
		sb.append(" document.getElementById('pageBeanForm').submit();");
		sb.append(" }");
		sb.append(" function skipPage() {");
		sb.append(" var page = document.getElementById('skipPage').value;");
		sb.append(" if (!page || isNaN(page) || parseInt(page) < 1\r\n" + 
				"					|| parseInt(page) > "+pageBean.maxPage()+") {");
		sb.append(" alert('请输入1~"+pageBean.maxPage()+"的数字');");
		sb.append(" return;");
		sb.append(" }");
		sb.append(" gotoPage(page);");
		sb.append(" }");
		sb.append(" </script>");
		
		return sb.toString();
	}
	
	

}

建一个配置tld文件

<?xml version="1.0" encoding="UTF-8" ?>

<taglib xmlns="http://java.sun.com/xml/ns/j2ee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd"
    version="2.0">
    
  <description>JSTL 1.1 core library</description>
  <display-name>JSTL core</display-name>
  <tlib-version>1.1</tlib-version>
  <short-name>c</short-name>
  <uri>http://jsp.veryedu.cn</uri>

  <validator>
    <description>
        Provides core validation features for JSTL tags.
    </description>
    <validator-class>
        org.apache.taglibs.standard.tlv.JstlCoreTLV
    </validator-class>
  </validator>

  
  
  
  <tag>
    <name>page</name>
    <tag-class>com.xbb.tag.PageTag</tag-class>
    <body-content>JSP</body-content>
    <attribute>
        <name>pageBean</name>
        <required>true</required>
        <rtexprvalue>true</rtexprvalue>
	<type>boolean</type>
    </attribute>
    <attribute>
        <description>
Name of the exported scoped variable for the
resulting value of the test condition. The type
of the scoped variable is Boolean.        
        </description>
        <name>var</name>
        <required>false</required>
        <rtexprvalue>false</rtexprvalue>
    </attribute>
    <attribute>
        <description>
Scope for var.
        </description>
        <name>scope</name>
        <required>false</required>
        <rtexprvalue>false</rtexprvalue>
    </attribute>
  </tag>

</taglib>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link
	href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css"
	rel="stylesheet">
<script
	src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.js"></script>
<title>书籍列表</title>
<style type="text/css">
.page-item input {
	padding: 0;
	width: 40px;
	height: 100%;
	text-align: center;
	margin: 0 6px;
}
 
.page-item input, .page-item b {
	line-height: 38px;
	float: left;
	font-weight: 400;
}
 
.page-item.go-input {
	margin: 0 10px;
}
</style>
</head>
<body>
	<form class="form-inline"
		action="${pageContext.request.contextPath }/book.action" method="post">
		<div class="form-group mb-2">
			<input type="text" class="form-control-plaintext" name="bname"
				placeholder="请输入书籍名称">
		</div>
		<button type="submit" class="btn btn-primary mb-2">查询</button>
	</form>
 
	<table class="table table-striped ">
		<thead>
			<tr>
				<th scope="col">书籍ID</th>
				<th scope="col">书籍名</th>
				<th scope="col">价格</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>圣墟第1章</td>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>圣墟第1章</td>
				<td>1</td>
			</tr>
 
		</tbody>
	</table>
	
	
 
</body>
</html>

效果：