通用分页之自定义标签控制前台显示

前言

通用分页的后台代码在之前的代码中啊：
这里是通用分页后台代码的传送门哦┗( ▔, ▔ )┛
还有详细介绍自定义标签的博客：
|ू･ω･` )自定义标签的详解诶
为什么使用自定义标签是因为通用分页本意是为了节省代码，增加代码的重用性，而自定义标签也是一样的为了增强代码的简洁性和可读性所以使用自定义标签
之前的博客有讲过自定义标签的开发步骤和生命周期这期咱就不讲的太复杂了熬。

效果图

自定义标签做出上面画出的做分页的换页跳转

代码分析

<%@ 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="/zengjing" %>
<!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>
<c:if test="${empty recruitment }">
	<jsp:forward page="recruitment.action"></jsp:forward>
</c:if>
	<form action="recruitment.action" method="post">
		<input name="name" value="${name }" />
		<input type="submit" value="查询" />
	</form>
	<table border="1px" width="100%" >
		<tr>
			<td align="center">职位</td>
			<td align="center">公司</td>
			<td align="center">工作地址</td>
			<td align="center">薪资</td>
			<td align="center">学历要求</td>
			<td align="center">爬取时间</td>
			<td align="center">查看详情</td>
		</tr>
		<c:forEach items="${recruitment}" var="r" >
			<tr>
			<td align="center">${r.job}</td>
			<td align="center">${r.company }</td>
			<td align="center">${r.address }</td>
			<td align="center">${r.salary }</td>
			<td align="center">${r.limit }</td>
			<td align="center">${r.time }</td>
			<td align="center">
				<a href="details.do?id=${r.id}">查看详情</a>
			</td>
		</tr>
		</c:forEach>
	</table>
	 <z:page pageBean="${pageBean }"></z:page> 
	 <a href="add.jsp">增加</a>
</body>
</html>

可以看到我这只放了一个自定义标签，因为我把写换页按钮的那一行功能的代码放在了标签里面封起来了，再看看助手类：

package com.zengjing.tag;

import java.lang.reflect.InvocationTargetException;
import java.util.Map;

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

import com.zengjing.util.PageBean;

public class PageTag extends BodyTagSupport{

	private static final long serialVersionUID = 6677030782477028008L;

	private PageBean pageBean;

	public PageBean getPageBean() {
		return pageBean;
	}

	public void setPageBean(PageBean pageBean) {
		this.pageBean = pageBean;
	}
	
	@Override
 	public int doStartTag() throws JspException {
		try {
			JspWriter out=this.pageContext.getOut();
			out.println(toHtml());
			return SKIP_BODY;
		} catch (Exception e) {
			throw new RuntimeException(e);
		}
		
	}
	
	public String toHtml() throws IllegalAccessException, InvocationTargetException, NoSuchMethodException {
		StringBuffer sb=new StringBuffer();
		
		//分页按钮
		sb.append("<div style='text-align:center;font-size:18px;'>\r\n" + 
				"	当前第"+pageBean.getPage()+"页  &nbsp;共"+pageBean.getMaxPage()+"页   &nbsp; 共"+pageBean.getTotal()+"条  &nbsp;\r\n" + 
				"	<a href='javascript:doForward(1)'>首页</a>  &nbsp;\r\n" + 
				"	<a href='javascript:doForward("+pageBean.getPerviousPage()+")'>上一页</a>  &nbsp;\r\n" + 
				"	<a href='javascript:doForward("+pageBean.nextPage()+")'>下一页</a>  &nbsp;\r\n" + 
				"	<a href='javascript:doForward("+pageBean.getMaxPage()+")'>尾页</a>\r\n" + 
				"	<input id='numTxt' type='text' style='width:50px;' />\r\n" + 
				"	<a href='javascript:doSkip()'>GO</a>\r\n" + 
				"</div>");
		//隐藏域表单 专门用来传递数据
		sb.append("<form id='pageForm' action='"+this.pageBean.getUrl()+"' method='post' >");
		//System.out.println(this.pageBean.getUrl());
		sb.append("<input type='hidden' name='page' />");
		//从map集合获取参数
		Map<String, String[]> map= pageBean.getMap();
		//遍历集合
		for(Map.Entry<String, String[]> entry:map.entrySet()) {
			String name=entry.getKey();
			String[] value=entry.getValue();
			if("page".equals(name)) {
				continue;//退出循环进去下一个循环
			}
			//遍历数组
			for(int i=0;i<value.length;i++) {
				sb.append("<input='hidden' name='"+name+"' value='"+value[i]+"' />");
			}
		}
		
		sb.append("</form>");
		if(null==pageBean||!pageBean.isPagination()) {
			return sb.toString();
		}
		System.out.println(111);
		//动态拼接js
		sb.append("<script type=\"text/javascript\">\r\n" + 
				"	function doForward(page){\r\n" + 
				"		var f=document.getElementById('pageForm');\r\n" + 
				"		f.page.value=page;\r\n" + 
				"		f.submit();\r\n" + 
				"	}\r\n" + 
				"	\r\n" + 
				"	function doSkip(){\r\n" + 
				"		var num=document.getElementById('numTxt').value;\r\n" + 
				"		if(!num||isNaN(num)||!/^[0-9]+$/.test(num)||parseInt(num)<=0||parseInt(num)>"+pageBean.getMaxPage()+"){\r\n" + 
				"			alert(\"请输入1~"+pageBean.getMaxPage()+"之间的整数\")\r\n" + 
				"		}else{\r\n" + 
				"			doForward(num);\r\n" + 
				"		}\r\n" + 
				"	}\r\n" + 
				"</script>");
		return sb.toString();
	}
	
}

我说了嘛，我把前端的代码封在了标签里面，这个助手类里就有两个主要的方法doStartTag和toHTML方法，doStartTag里是输出toHTML的方法返回的值，toHtml方法就返回的是一个拼接的字符串，拼接的内容就是前端代码，拼接最好是写好了代码再copy到这边拼接，不然很容易出错哦。
再看看tld文件：

<tag>
		<!-- 标签名 -->
		<name>page</name>
		<tag-class>com.zengjing.tag.PageTag</tag-class>
		<body-content>empty</body-content>
		<attribute>
			<name>pageBean</name>
			<required>true</required>
			<rtexprvalue>true</rtexprvalue>
		</attribute>
	</tag>

分页按钮有一个属性就是pageBean，必填可为表达式，在jsp页面头部导入taglib标签：

<%@ 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="/zengjing" %>
<!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>

最后就可以出现和上方效果图一样的效果啦！

总结

敲代码真的还是需要细节和耐心，拼接的那个地方一不小心就很容易有错误然后没有效果，通用分页到这里完美结束啦拜拜！