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

本文介绍了如何使用自定义标签来增强Java后端通用分页的代码简洁性和可读性。通过一个自定义标签封装换页功能,详细分析了标签的助手类和TLD文件配置,强调了细节和耐心在编程过程中的重要性。

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

前言

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

效果图

在这里插入图片描述
自定义标签做出上面画出的做分页的换页跳转

代码分析

<%@ 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>

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

总结

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

评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值