自定义通用分页标签02

目录

🧡首先,我们需要准备一个servlet

然后,就是自定义标签助手类(PagingTag):

最后就是页面显示了

---

 

上期我们已经把主要的准备工作搞定了。

那么接下来我们的任务就是自定义标签了 ，以及页面的数据显示部分了。

---

🧡首先,我们需要准备一个servlet

package com.ljq.mymvc.servlert;

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.ljq.mymvc.model.Student;
import com.ljq.mymvc.util.PageBean;
import com.ljq.mymvc.util.StudentDao;

/**
 * 分页数据处理
 * 
 * @author 一麟
 *
 */
@WebServlet("/students")
public class StudentServlet extends HttpServlet {

	private StudentDao dao = new StudentDao();

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		doPost(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		PageBean pageBean = new PageBean();
		pageBean.setRequest(req);// 给pageBean对象设置传入的参数

		String sname = req.getParameter("sname");// 获取查询输入框的值
		List<Student> students = dao.getStudents(sname, pageBean);// 根据输入框值和分页对象进行分页查询
		req.setAttribute("students", students);// 将查询的学生传入页面
		req.getRequestDispatcher("/student.jsp").forward(req, resp);// 转发到页面
	}

}

然后,就是自定义标签助手类(PagingTag):

package com.ljq.mymvc.tag;

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

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

import com.ljq.mymvc.util.PageBean;

/**
 * 分页标签助手类 
 * 
 * @author 一麟
 *
 */
public class PagingTag extends BodyTagSupport {

	private PageBean pageBean;// 分页对象

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

	/**
	 * 初始化
	 */
	@Override
	public int doStartTag() {

		JspWriter out = this.pageContext.getOut();

		try {
			out.println(buildHtml());
		} catch (IOException e) {
			e.printStackTrace();
		}

		return SKIP_BODY;
	}

	/**
	 * 将分页处理工具、搜索框的隐藏表单和js页面事件处理代码拼接起来
	 * 
	 * @return
	 */
	private String buildHtml() {

		// 分页处理工具
		String pagingTool = "<div style=\"text-align: right; width:98%;\">\r\n" + "		第" + pageBean.getPage()
				+ "页&nbsp;&nbsp;&nbsp;\r\n" + "		共" + pageBean.getTotal() + "条记录&nbsp;&nbsp;&nbsp;\r\n"
				+ "		<a href=\"javascript: goPage(1);\">首页</a>&nbsp;&nbsp;&nbsp;\r\n"
				+ "		<a href=\"javascript: goPage(" + pageBean.getPreviousPage()
				+ ");\">上页</a>&nbsp;&nbsp;&nbsp; \r\n" + "		<a href=\"javascript: goPage(" + pageBean.getNextPage()
				+ ");\">下页</a>&nbsp;&nbsp;&nbsp; \r\n" + "		<a href=\"javascript: goPage(" + pageBean.getTotalPage()
				+ ");\">尾页</a>&nbsp;&nbsp;&nbsp;\r\n"
				+ "		第<input type=\"text\" size=\"2\" id=\"pageNumber\" onkeypress=\"toPageNumber(event,this.value)\"/> \r\n"
				+ "		<a href=\"javascript: goPage(document.getElementById('pageNumber').value);\">GO</a>\r\n"
				+ "	</div>";

		// 隐藏表单
		String hiddenForm = "<form action='" + pageBean.getUrl() + "' id=\"pagingForm\" method=\"post\">"
				+ "<input type=\"hidden\" name=\"page\" />";
		Map<String, String[]> parameterMap = pageBean.getParameterMap();

		// 循环所有的参数，并为所有的参数生成隐藏表单
		for (Map.Entry<String, String[]> param : parameterMap.entrySet()) {
			String paramName = param.getKey();
			if ("page".equals(paramName))
				continue;
			String[] values = param.getValue();
			for (String val : values) {
				hiddenForm += "<input type='hidden' name='" + paramName + "' value='" + val + "'>";
			}
		}
		hiddenForm += "</form>";

		// 事件代码
		String js = "<script>\r\n" + "function goPage(pageNum) {\r\n" + "	debugger;\r\n"
				+ "	let form = document.getElementById(\"pagingForm\");\r\n" + "	let lastPage = '"
				+ pageBean.getTotalPage() + "';\r\n" + "	if(pageNum > lastPage) pageNum = lastPage;\r\n"
				+ "	if(pageNum < 1) pageNum = 1;\r\n" + "	form.page.value = pageNum;\r\n" + "	form.submit();\r\n"
				+ "}\r\n" + "\r\n" + "function toPageNumber(event,pn) {\r\n" + "	//debugger;\r\n"
				+ "	if(event.keyCode ==  13) {\r\n" + "		let form = document.getElementById(\"pagingForm\");\r\n"
				+ "		form.page.value = pn;\r\n" + "		form.submit();\r\n" + "	}\r\n" + "}\r\n" + "</script>";

		return pagingTool + hiddenForm + js;
	}

}

我们可以发现在这个助手类中大量的进行网页元素的追加 ，没错，我们使用的助手类做的就是将页面中分页用到的元素进行封装。

编写完助手类之后我们需要在tag.tld文件中加入注册代码：

 <tag>
     <name>paging</name>
     <tag-class>com.zking.ml.PagingTag</tag-class>
     <body-content>empty</body-content>
     <description>分页标签</description>
     <attribute>
     <name>pageBean</name>
     <required>true</required>
     <rtexprvalue>true</rtexprvalue>
     </attribute>
     </tag>

然后就能够在页面中使用分页标签了：

<%@taglib prefix="z" uri="/yilinyyds" %>

---

最后就是页面显示了

代码如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="z" uri="/yilinyyds" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<center>
      <h1>学生信息</h1>
      <form action="<%=request.getContextPath()%>/student" method="post">
         <input type="text" name="sname">
         <input type="submit" value="查询">
      </form>
      <table border>
      <tr>
         <td>学生学号</td>
         <td>学生姓名</td>
         <td>学生年龄</td>
         <td>学生地址</td>
      </tr>
      <c:forEach items="${students}" var="s">
      <tr>
      <td>${s.sid}</td>
        <td>${s.sname}</td>
          <td>${s.age}</td>
            <td>${s.addr}</td>
      </tr>
      </c:forEach>
      </table>
    
     <z:paging pageBean="${pageBean}"/>
</center>
 
</body>
</html>

这样一来我们的分页标签就大功告成了。

效果图如下：