J2EE基础-通用分页(2)

最新推荐文章于 2024-09-17 11:42:54 发布

歐陽。

最新推荐文章于 2024-09-17 11:42:54 发布

阅读量448

点赞数 3

分类专栏： J2EE 文章标签：前端 java servlet web eclipse

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_65211978/article/details/125443238

版权

J2EE 专栏收录该内容

18 篇文章 3 订阅

订阅专栏

目录

一、改造pagebean

分页核心思路

新建一个 BookServlet :

从Servlet运行结果：

二、通用分页

PageTag助手类：

tld配置文件：

优化PageBean：

在bookList.jsp内导入y标签和c标签：

优化BookServlet：

再通过标签将数据遍历出来展示在页面上：

中文乱码处理类：

前言

上次我们分享了通用分页的后台代码(http://t.csdn.cn/WaVH1)，今天分享的内容通用分页的前端代码

一、改造pagebean

分页核心思路

通过上图的得出一下思路

需要新增变量保存上一次查询条件
需要新增变量保存上一次请求地址：http://localhost:80/oyang_page/book/search
需要添加方法：获取最大页的页码
需要添加方法：获取下一页的页码
需要添加方法：获取上一页的页码
需要新增方法：初始化pagebean

PageBean类：

package com.oyang.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 Map<String, String[]> parameterMap=new HashMap<String,String[]>();
	
//	需要新增变量保存上一次请求地址：http://localhost:80/oyang_page/book/search
	private String url;
	
//	需要添加方法：获取最大页的页码
	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 serRequest(HttpServletRequest request) {
		 this.setPage(request.getParameter("page"));
		 this.setRows(request.getParameter("rows"));
		 this.setPagination(request.getParameter("pagination"));
		 this.setUrl(request.getRequestURL().toString());
		 System.out.println(request.getRequestURL().toString());
		 this.setParameterMap(request.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));
		}
	}

	public void setPage(String page) {
		if(StringUtils.isNotBlank(page)) {
			//set自动生成的方法
			this.setPage(Integer.valueOf(page));
		}
	}

	public PageBean() {
		super();
	}

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

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

	public String getUrl() {
		return url;
	}

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

	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
				+ ", parameterMap=" + parameterMap + ", url=" + url + "]";
	}
	
	
}

新建一个 BookServlet :

package 	com.oyang.servlet;

import java.io.IOException;
import java.util.List;
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.oyang.dao.BookDao;
import com.oyang.entity.Book;
import com.oyang.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.serRequest(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>

从Servlet运行结果：

当我们能够拿到数据的时候改造就OK了

二、通用分页

分页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">
<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>

目前我们的页面效果是这样的，数据暂时都是无效的定死的数据，并且无法查看上一页、下一页、尾页：所以我们还需要继续改写：

PageTag助手类：

package com.zking.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.oyang.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' 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();//name/likes/page/rows
				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 "+(pageBean.getPage()==1? "disabled":"")+"'><a class='page-link'");
		sb.append(" 	href='javascript:gotoPage(1)'>首页</a></li>");
		sb.append(" <li class='page-item "+(pageBean.getPage()==1? "disabled":"")+"'><a class='page-link'");
		sb.append(" 	href='javascript:gotoPage("+pageBean.previousPage()+")'>&lt;</a></li>");
		sb.append("	<li class='page-item'><a class='page-link' href='#'>1</a></li>");
		sb.append(" <li class='page-item'><a class='page-link' href='#'>2</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'");
		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>");
		
		//分页jsp代码
		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('请输入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>y</short-name>
  <uri>https://blog.csdn.net/weixin_65211978?type=blog</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.zking.tag.PageTag</tag-class>
    <body-content>JSP</body-content>
     <attribute> 
        <name>pageBean</name>
        <required>true</required>
        <rtexprvalue>true</rtexprvalue>
    </attribute>
  </tag>

  
</taglib>

优化PageBean：

分页很多东西不用改变，但是其中有一个参数要变，那就是page（页数）

package com.oyang.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 Map<String, String[]> parameterMap=new HashMap<String,String[]>();
	
//	需要新增变量保存上一次请求地址：http://localhost:80/oyang_page/book/search
	private String url;
	
//	需要添加方法：获取最大页的页码
	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 serRequest(HttpServletRequest request) {
		 this.setPage(request.getParameter("page"));
		 this.setRows(request.getParameter("rows"));
		 this.setPagination(request.getParameter("pagination"));
		 this.setUrl(request.getRequestURL().toString());
		 System.out.println(request.getRequestURL().toString());
		 this.setParameterMap(request.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));
		}
	}

	public void setPage(String page) {
		if(StringUtils.isNotBlank(page)) {
			//set自动生成的方法
			this.setPage(Integer.valueOf(page));
		}
	}

	public PageBean() {
		super();
	}

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

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

	public String getUrl() {
		return url;
	}

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

	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
				+ ", parameterMap=" + parameterMap + ", url=" + url + "]";
	}
	
	
}

在bookList.jsp内导入y标签和c标签：

<%@taglib uri="https://blog.csdn.net/weixin_65211978?type=blog" prefix="y" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

优化BookServlet：

package 	com.oyang.servlet;

import java.io.IOException;
import java.util.List;
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.oyang.dao.BookDao;
import com.oyang.entity.Book;
import com.oyang.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.serRequest(request);
		
		BookDao bd=new  BookDao();
		Book book=new Book();
		book.setBname(request.getParameter("bname"));
		try {
			List<Book> books = bd.list2(book, pageBean);
			request.setAttribute("books", books);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		request.setAttribute("pageBean", pageBean);
		request.getRequestDispatcher("/bookList.jsp").forward(request, response);
	}

}

再通过标签将数据遍历出来展示在页面上：

		 <c:forEach items="${books}" var="b"> 
			<tr>
				<td>${b.bid}</td>
				<td>${b.bname}</td>
				<td>${b.price}</td>
			</tr>
		</c:forEach>
		</tbody>
	</table>
	
	<y:page pageBean="${pageBean}"></y:page>

结束完这些后你会发现，在查询的时候会出现乱码问题，这时候我们需要加上一个过滤器

中文乱码处理类：

package com.oyang.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();
		}
	}

}

OK，今日的学习就到此结束啦，如果对个位看官有帮助的话可以留下免费的赞哦(收藏或关注也行),如果文章中有什么问题或不足以及需要改正的地方可以私信博主，博主会做出改正的。个位看官，小陽在此跟大家说拜拜啦！

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

打赏作者

歐陽。 你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。