J2EE--通用分页（后台）

xxie编程

已于 2022-06-24 11:19:34 修改

阅读量246

点赞数

分类专栏： eclipse 文章标签： java-ee servlet java

于 2022-06-24 11:18:06 首次发布

本文链接：https://blog.csdn.net/qq_63531917/article/details/125441432

版权

eclipse 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、底层代码搭建

首先是我们的页面代码

<%@ 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 bg-success">
		<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>

页面效果
在这里插入图片描述
因为这里昨天已经搭建好了后台代码，所以我们现在该分页类就行
现在修改分页类代码,这里需要两个属性，一个是需要新增变量保存上一次请求地址，一个是需要新增变量保存上一次查询条件,还需要添加方法–>获取最大页码；需要添加方法–>获取上一页的页码；需要添加方法–>获取下一页的页码；需要新增方法：初始化pageBean
新的pageBean代码

package com.xlb.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;// 是否分页

	//需要新增变量保存上一次请求地址
	private String url;
	
	//需要新增变量保存上一次查询条件
	private Map<String, String[]> parameterMap = new HashMap<String, String[]>();
	
	
	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;
	}

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

	/**
	 * 获得起始记录的下标
	 * @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 + "]";
	}
	
	//需要添加方法：获取最大的页码
	public int maxPage() {
		return this.total % this.rows == 0 ? this.total / this.rows :
			this.total / this.rows +1;
	}
	//需要添加方法：获取上一页的页码
	public int previousPage() {
		return this.page > 1 ? this.page -1 : this.page;
	}
	
	//需要添加方法：获取下一页的页码
	public int nextPage() {
		return this.page < this.maxPage() ? 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.setParameterMap(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.parseInt(rows));
		}
	}

	private void setPage(String page) {
		if(StringUtils.isNotBlank(page))
			//set自动生成的方法(只有一行代码时可以不用花括号)
		this.setPage(Integer.parseInt(page));
	}
}

二、自定义分页标签

然后自定义一个标签来放通用分页代码,有一个属性，我们需要把分页类引用调用分页属性,再用StringBuffer拼接分页代码来输送到页面
标签PageTag

package com.xlb.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.xlb.util.PageBean;

public class PageTag extends BodyTagSupport{
	
	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'>"); 必须存在
		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 string : values) {
						sb.append(" <input type='hidden' name='"+key+"' value='"+string+"' >");
					}
				}
			}
		}
		sb.append("</form>");
		
		//分页条
		sb.append("<ul class='pagination justify-content-center'>");
		sb.append("		<li class='page-item "+(pageBean.getPage() == 1 ? "disabled" : "" )+" '><a class='page-link' href='javascript:gotoPage(1)'>首页</a></li>");
		sb.append("     <li class='page-item "+(pageBean.getPage() == 1 ? "disabled" : "" )+" '><a class='page-link' href='javascript:gotoPage("+pageBean.previousPage()+")'>&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 "+(pageBean.getPage() == pageBean.maxPage() ? "disabled" : "" )+"'><a class='page-link' href='javascript:gotoPage("+pageBean.nextPage()+")'>&gt;</a></li>");
		sb.append("		<li class='page-item "+(pageBean.getPage() == pageBean.maxPage() ? "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' type='text' id='skipPage' name='' /><b>页</b></li>");
		sb.append("		<li class='page-item go'><a class='page-link' 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");
		sb.append("     || parseInt(page) > "+pageBean.maxPage()+") {");
		sb.append("     alert('请输入"+pageBean.maxPage()+"的数字');");
		sb.append("     return;");
		sb.append("    }");
		sb.append("   gotoPage(page);");
		sb.append(" }");
		sb.append("</script>");
		
		return sb.toString();
	}	
}

配置tld文件
xlb.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>x</short-name>
  <uri>http://jsp.xlb.like.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.xlb.tag.PageTag</tag-class>
  	<!-- 代表一个JSP标签(不能省) -->
    <body-content>JSP</body-content>
    <!-- 该自定义JSP标签的属性名称 -->
    <attribute>
        <name>pageBean</name>
        <required>true</required> 
      	<rtexprvalue>true</rtexprvalue> 
    </attribute>
  </tag>

</taglib>

因为我们需要一个pageBean，所以我们建立一个servlet把pageBean传过来
BookServlet

package com.xlb.servlet;

import java.io.IOException;
import java.util.List;

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.xlb.dao.BookDao;
import com.xlb.entity.Book;
import com.xlb.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);
		BookDao bd=new BookDao();
		Book b=new Book();
		b.setBname(request.getParameter("bname"));
		try {
			List<Book> books = bd.list2(b, pageBean);
			request.setAttribute("books", books);
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		request.setAttribute("pagebean", pageBean);
		request.getRequestDispatcher("/bookList.jsp").forward(request, response);
		
	}
}

主界面调用，导入标签然后运行
新主界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://jsp.xlb.like.cn" prefix="x" %>	
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!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/search" 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>
			<c:forEach items="${books}" var="b">
				<tr>
					<td>${b.bid}</td>
					<td>${b.bname}</td>
					<td>${b.price}</td>
				</tr>
			</c:forEach>
		</tbody>
	</table>
	
	<x:page pageBean="${pagebean}"></x:page>
		
</body>
</html>

运行测试
在这里插入图片描述
如果超过最大页码也会提示

三、乱码解决

上面基本分页实现了，不过如果进行模糊查询，输入中文就会乱码，所以我们写一个过滤器来解决乱码问题（这边上一期博客已经写过了所以我们直接调用）
处理所有book请求

package com.xlb.util;

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

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 中文乱码处理
 * 
 */
@WebFilter("/book/*")
public class EncodingFiter implements Filter {

	private String encoding = "UTF-8";// 默认字符集

	public EncodingFiter() {
		super();
	}

	public void destroy() {
	}

	public void doFilter(ServletRequest request, ServletResponse response,
			FilterChain chain) throws IOException, ServletException {
		HttpServletRequest req = (HttpServletRequest) request;
		HttpServletResponse res = (HttpServletResponse) response;

		// 中文处理必须放到 chain.doFilter(request, response)方法前面
		res.setContentType("text/html;charset=" + this.encoding);
		if (req.getMethod().equalsIgnoreCase("post")) {
			req.setCharacterEncoding(this.encoding);
		} else {
			Map map = req.getParameterMap();// 保存所有参数名=参数值(数组)的Map集合
			Set set = map.keySet();// 取出所有参数名
			Iterator it = set.iterator();
			while (it.hasNext()) {
				String name = (String) it.next();
				String[] values = (String[]) map.get(name);// 取出参数值[注：参数值为一个数组]
				for (int i = 0; i < values.length; i++) {
					values[i] = new String(values[i].getBytes("ISO-8859-1"),
							this.encoding);
				}
			}
		}

		chain.doFilter(request, response);
	}

	public void init(FilterConfig filterConfig) throws ServletException {
		String s = filterConfig.getInitParameter("encoding");// 读取web.xml文件中配置的字符集
		if (null != s && !s.trim().equals("")) {
			this.encoding = s.trim();
		}
	}

}