当前位置： 代码迷 >> JavaScript >> 很强大的jsp手记分页插件 实现json 等一些ajax技术 联合查询 模糊查询 条件查询
  详细解决方案

很强大的jsp手记分页插件 实现json 等一些ajax技术 联合查询 模糊查询 条件查询

热度：276   发布时间：2012-08-28 12:37:01.0
很强大的jsp手写分页插件 实现json 等一些ajax技术 联合查询 模糊查询 条件查询
这个插件里面分页功能很强大，调用者只需赋几个值就可以了。

下面是ticket.jsp 全代码：
<script type="text/javascript" src="../My97DatePicker/WdatePicker.js">
</script>

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
[color=red]<base href="<%=basePath%>">[/color] <!--这个路径根据自己而定-->
<%@page import="com.pojos.TbLog"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script type="text/javascript" src="js/jquery-1.6.js">
</script>

<script type="text/javascript"
	src="jslib/jquery_pagination/jquery.pagination.js">
</script>
<link rel="stylesheet" href="css/qne.css" type="text/css"></link>
<script language="javascript" type="text/javascript"
	src="js/validate.js">
</script>

<script type="text/javascript" src="jslib/mytable/mytable1.1.js"
	charset="gb2312">
</script>

<link rel="stylesheet" type="text/css" href="css/base.css">
<link type="text/css" rel="stylesheet"
	href="jslib/mytable/css/mytable.css" />
<link type="text/css" rel="stylesheet"
	href="jslib/jquery_pagination/pagination.css" />
<c:set scope="page" var="isColleague" value="${param.type==1}" />
<style>
table.mytable {
	width: 1119px;
}
</style>



<script type="text/javascript">
function detail(orderid) {
	var url = "<%=basePath%>/qne.do?p=orderManage&manageType=detail&orderid=" + orderid;

	// var ShopConfirmLayer=jQuery("#ShopConfirmLayer").val(); 
	$.get(url, {
		id : "d"
	}, function(content) {
		document.getElementById("DetailLayer").innerHTML = content;
	});

	var DetailLayer = document.getElementById("DetailLayer");
	var webBgLayer = document.getElementById("webBgLayer");
	// ShopConfirmLayer.innerHTML=str; 
	DetailLayer.style.display = "";//显示内容层，显示覆盖层

	webBgLayer.style.display = "";
	webBgLayer.style.width = document.documentElement.scrollWidth + 200 + "px"; //为覆盖层设置宽度
	webBgLayer.style.height = document.documentElement.scrollHeight + 1350
			+ "px"; //为覆盖层设置高度 

	DetailLayer.style.left = ((webBgLayer.style.width - 726) / 2) + "px";
	DetailLayer.style.top = Math
			.abs(parseInt((document.documentElement.clientHeight - ShopConfirmLayer.offsetHeight) / 2))
			+ document.documentElement.scrollTop + "px"; //为内容层设置位置

}

function alter(orderid){
	var url = "<%=basePath%>/qne.do?p=orderManage&manageType=alter&orderid=" + orderid;

	// var ShopConfirmLayer=jQuery("#ShopConfirmLayer").val(); 
	$.get(url, {
		id : "d"
	}, function(content) {
		document.getElementById("DetailLayer").innerHTML = content;
	});

	var DetailLayer = document.getElementById("DetailLayer");
	var webBgLayer = document.getElementById("webBgLayer");
	// ShopConfirmLayer.innerHTML=str; 
	DetailLayer.style.display = "";//显示内容层，显示覆盖层

	webBgLayer.style.display = "";
	webBgLayer.style.width = document.documentElement.scrollWidth + 200 + "px"; //为覆盖层设置宽度
	webBgLayer.style.height = document.documentElement.scrollHeight + 1600
			+ "px"; //为覆盖层设置高度 

	DetailLayer.style.left = ((webBgLayer.style.width - 726) / 2) + "px";
	DetailLayer.style.top = Math
			.abs(parseInt((document.documentElement.clientHeight - ShopConfirmLayer.offsetHeight) / 2))
			+ document.documentElement.scrollTop + "px"; //为内容层设置位置
}

function CloseDetail() {
	var DetailLayer = document.getElementById("DetailLayer");
	var webBgLayer = document.getElementById("webBgLayer");
	DetailLayer.style.display = "none";
	webBgLayer.style.display = "none";
}

function drop(orderid) {
	var url = "<%=basePath%>/qne.do?p=orderDrop&orderid=" + orderid;
	question = confirm("您确定删除吗？")
	if (question != "0") {
		$.get(url, {
			id : "d"
		}, function(content) {
				$("#query").click();
		});
	}

}
</script>


<%-- 查询表单与结果显示区 -start--%>
<div id="queryDiv" style="padding-top: 18px;">
	<form id="queryForm" class="queryForm" onsubmit="sbCont()">
		<table width="1117px" class="queryTable"
			style="border: 1px solid silver;">
			<tr>
				<td>
					订单号
				</td>
				<td>
					<input type="text" name="orderNum" id="orderNum" class="isForm"
						size="20" maxlength="20" />
				</td>
				<td>
					订单状态
				</td>
				<td>
					<select name="orderStatus" id="orderStatus" class="isForm">

						<option value="">
						
						</option>
						<option value="0">
							未出票申请退款
						</option>
						<option value="5">
							支付成功等待出票
						</option>
						<option value="6">
							出票中
						</option>
						<option value="7">
							出票完成
						</option>
						<option value="4">
							订单取消
						</option>

					</select>
				</td>



				<td>
					订票时间
				</td>
				<td width="330px;">
					<input type="text" name="time" id="time" class="isForm"
						onClick="WdatePicker()" />
				</td>

			</tr>
			<tr>

				<td>
					航班号
				</td>
				<td>
					<input type="text" name="flightNum" class="isForm" size="10"
						maxlength="10" />
				</td>
				<td>
					舱位
				</td>
				<td>
					<input type="text" name="cabin" id="cabin" class="isForm" />
				</td>
				<td>
					出票完成时间
				</td>
				<td align="left">
					<input type="text" name="finishTime" id="finishTime" class="isForm"
						onClick="WdatePicker()" />
				</td>

			</tr>
			<tr>

				<td>
					乘机人姓名
				</td>
				<td>
					<input type="text" name="passengerName" id="passengerName"
						class="isForm" size="10" maxlength="10" />
				</td>
				<td>
					票号
				</td>
				<td>
					<input type="text" name="ticketNum" id="ticketNum" class="isForm"
						size="10" maxlength="10" />
				</td>
				<td>
					PNR
				</td>
				<td>
					<input type="text" name="pnr" id="pnr" class="isForm" size="10"
						maxlength="10" />
					联系人手机号
					<input type="text" name="linkmanCellPhone" id="linkmanCellPhone"
						class="isForm" size="10" maxlength="10" />
				</td>

			</tr>
			<tr>
				<td colspan="14">
					<div>
						<table style="border: 1px solid silver;">
							<tr>
								<td>
									出发城市
								</td>
								<td>
									<input type="text" name="startCity" id="startCity"
										class="isForm" size="10" maxlength="10" />
								</td>
								<td>
									到达城市
								</td>
								<td>
									<input type="text" name="endCity" id="endCity" class="isForm"
										size="10" maxlength="10" />
								</td>
								<td>
									航班公司
								</td>
								<td>
									<input type="text" name="flightCompany" id="flightCompany"
										class="isForm" size="10" maxlength="10" />
								</td>
								<td>
									航班时间
								</td>
								<td>
									<input type="text" name="flightTime1" id="flightTime1"
										class="isForm" onClick="WdatePicker()" />
								</td>
								<td>
									航程类型
								</td>
								<td>
									<select name="voyageType" id="voyageType" class="isForm">
										<option value="">
											全部航程
										</option>
										<option value="0">
											单程
										</option>
										<option value="1">
											往返
										</option>
									</select>
								</td>



							</tr>
						</table>

					</div>

				</td>
			</tr>
			<tr>
				<td colspan="14">
					<div>
						<table style="border: 1px solid silver;">
							<tr>

								<td>
									出票员
								</td>
								<td>
									<input type="text" name="drawer" id="drawer" class="isForm">
								</td>
								<td>
									录入员
								</td>
								<td>
									<select id="guider" name="guider" class="isForm">
										<option value="">
											全部录入员
										</option>
									</select>
								</td>
							</tr>
						</table>
					</div>
				</td>
			</tr>
			<tr>
				<td style="padding-bottom: 0px;">
					<input type="submit" id="query" value="查询" />
					<input type="reset" value="重置" />
				</td>


			</tr>
			<tr>
				<td height="8px;">

				</td>
			</tr>

		</table>
	</form>
</div>
<div class="viewResults">
	<table class="mytable">
		<thead>
			<tr>
				<th width="20">
					<input type="checkbox" />
				</th>
				<th width="45">
					序
				</th>
				<th>
					<a xx="orderNum">订单号</a>
				</th>
				<th>
					<a xx="name">订单当前状态</a>
				</th>
				<th>
					<a xx="telphone">起始到达</a>
				</th>
				<th>
					<a xx="mobilephone">航班</a>
				</th>
				<th>
					<a xx="work_qq">舱位</a>
				</th>
				<th>
					<a xx="office">出票日期</a>
				</th>
				<th>
					<a xx="department.id">起飞时间</a>
				</th>
				<th>
					<a xx="work_state">票价</a>
				</th>
				<th>
					<a xx="agreement">出票员</a>
				</th>
				<th>
					<a xx="lodging">操作</a>
				</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
	<div style="float: left;">
		<div id="pager" class="pagination" style="float: left;"></div>
		<div
			style="float: left; font: '宋体'; font-size: 14px; color: #000; margin-top: 5px;">
			共
			<span id="totalNums"></span>条记录
		</div>
	</div>
	<div style="clear: both;"></div>
</div>

<!--详细信息内容层-->

<div id="DetailLayer"
	style="position: absolute; top: 300px; left: 100px; z-index: 900; width: 726px; display: none; background-color: white">

	<input name="button1" value="关闭" type="button" onclick="CloseDetail()" />
</div>

<!--覆盖层-->
<div id="webBgLayer"
	style="position: absolute; top: 0px; left: 0px; z-index: 899; background-color: gray; height: 100%; width: 100%; display: none; -moz-opacity: 0.9; filter: alpha(opacity =   50);"></div>

[color=red]<%-- 查询表单与结果显示区 -end--%>[/color][color=red][b] <!--关键了-->[/b][/color]
<script type="text/javascript">
/*mytable--start*/

[color=red]var pagesTotal = 0;//定义总条数[/color]
$.mytable( {
	
<%--	param:{"pvalue":"000001000000000"},--%>
	url : "<%=basePath%>/qne.do?p=searchOrder",
	[color=red]sortCol : [ 'time', 'asc' ],  //按pojo对象中的time 进行asc排序[/color]
	storageSortColAttr : 'xx', //可有可无
	afterTableLoad_beforePaginationLoad : function(cfg) {
		cfg.pagesTotal = pagesTotal;
		$('#totalNums').text(pagesTotal);
	},
	beforeLoad : function() {//mytable查询之前做表单验证
<%--		var t2 = $('#q_work_number');--%>
<%--		var t3 = $('#q_telphone');--%>
<%--		var t4 = $('#q_mobilephone');--%>
<%--		var t5 = $('#q_work_qq');--%>
<%--		var r1 = /[0-9]{1,20}/;--%>
<%--		var e2 = "【工号】应为数字。";--%>
<%--		var e3 = "【电话】应为数字。";--%>
<%--		var e4 = "【手机号】应为数字。";--%>
<%--		var e5 = "【工作QQ】应为数字。";--%>
<%--		return validate( [ t2, t3, t4, t5 ], [ r1, r1, r1, r1 ], [ e2, e3, e4,--%>
<%--				e5 ]);--%>
	}

});
/*mytable--end*/

/*显示用户选择框 ---start*/
var guider = "000001000000000";
var selJson = false;//录入员、领取员、发放员的json串,此变量可放入一个公共页面缓存起来
if(selJson){
	createOptions($("#guider"), guider);//录入员
} else {
	$.post("user.do",{p:"getUsersByPurviewValues", "purviewValues":guider},function(json){
		selJson = eval("("+json+")");
		createOptions($("#guider"), guider);//录入员
	});
}
function createOptions(sel, purviewValue) {
	for(var i = 0; i < selJson.length; i++) {
		if(purviewValue == selJson[i].purviewValue) {
			sel.append("<option value='"+ selJson[i].id +"'>"+selJson[i].username+"</option>");
		}
	}
}
/*显示用户选择框 ---end*/
	
</script>



分页 Action 代码：
   
//得到页面传递name值
 	Map<String, String> param = new HashMap<String, String>();
		
		for(Enumeration e  =  request.getParameterNames(); e.hasMoreElements();){
			String key = (String)e.nextElement();
			System.out.println(key);
			if(!"p".equals(key)&& !"isSendPage".equals(key)) { //p 我也没搞清是什么作用 还没测试 不过这样可以通过
				String value = (String)request.getParameter(key);
				param.put(key, value);
			}
		}
//注意 map 的键必须是pojo 对象的属性
Nam qneOrderList = qne_OrderService.qneOrderSearchMap(param);
request.setAttribute("qneOrderList", qneOrderList);
		request.setAttribute("sum", qneOrderList.remove(qneOrderList.size()-1)); //返回每页都数据
//在需加这段代码不要改动如下，之前不加分页时候第二页又是从1开始到最大条数
request.setAttribute("rowStart", request.getParameter("rowStart"));


action中 方法也可以这样写：
引用

Map<String, String> requestParaMap = filterRequestParameter(request);
在dao里面 创建stringBuffer 对象 获得map中的值 看是否为空，不为空则 append 。为hql语句。可以看这个：http://yzz9i.iteye.com/admin/blogs/1141648


分页Dao 代码：
//这个方法你也看得懂是干嘛的
private String getWhereContent2(Map<String, String> param) {
		StringBuilder sb = new StringBuilder();
		for (Iterator<String> iterator = param.keySet().iterator(); iterator
				.hasNext();) {
			String key = iterator.next(); //红色部分不需要改动 都是在插件里面配好了的（有需要可以改js）
			if ([color=red]key != null && !"".equals(key) && !"col".equals(key)
					&& !"order".equals(key) && !"rowStart".equals(key)
					&& !"pageSize".equals(key)[/color]) {
				if (param.get(key) != null && !"".equals(param.get(key))) {
                                     [color=darkred]// 这下面部分if里面的条件是你要进行完全搜索的字段 不需要完全搜索的key 会进行下面的else条件 进行%xxx% 式 搜索[/color]
					if ([color=red]"orderNum".equals(key) || "orderStatus".equals(key)
							|| "flightNum".equals(key) || "cabin".equals(key)
							|| "ticketNum".equals(key) || "pnr".equals(key)
							|| "linkmanCellPhone".equals(key)
							|| "startCity".equals(key) || "endCity".equals(key)
							|| "flightCompany".equals(key)
							|| "voyageType".equals(key)
							|| "linkmanCellPhone".equals(key)[/color]) {
						sb.append(" t." + key + " = '" + param.get(key)
								+ "' and ");
					} else {
						sb.append(" t." + key + " like '%" + param.get(key)
								+ "%' and ");
					}
				}
			}
		}

		if (!"".equals(sb.toString())) {
			sb.insert(0, " where(");
			sb.delete(sb.lastIndexOf("and"), sb.length());
			sb.append(") ");
		}
		return sb.toString();
	}

	@SuppressWarnings("unchecked")
	public List qneOrderSearchMap(Map<String, String> param) {
		System.out.println("---- -----");
		if (null == param || param.isEmpty()) {
			return null;
		}
[color=red]// rowStart pageSize 在插件里面配好了 默认是 0  50  不需改动[/color]
		[color=red]int rowStart = Integer.parseInt(param.get("rowStart"));
		int pageSize = Integer.parseInt(param.get("pageSize"));[/color]

[color=red]// col order 在插件里面配好了 key值便是刚才在ticket.jsp 脚本中所配的   sortCol : [ 'time', 'asc' ][/color]		
		[color=red]String col = param.get("col");   
		String order = param.get("order");[/color]
		boolean b = rowStart >= 0 && pageSize > 0;
		String w = getWhereContent2(param);
		String orderStr = ((null != col && !"".equals(col) && null != order && !""
				.equals(order)) ? "order by t." + col + " " + order : "");
		String hql = "from QNEOrder as t " + w + orderStr;
		String countSql = "select count(*) from QNEOrder as t" + w;
		System.out.println(hql);
		Session session = getSession();
		Query query = session.createQuery(hql);
		List list = null;
		if (b) {
			query.setFirstResult(rowStart);
			query.setMaxResults(pageSize);
		}
		System.out.println("hql=" + hql);
		list = query.list();
		if (b) {
			// 查总记录数
			List l = session.createQuery(countSql).list();
			list.add(l.get(0));
		}
		System.out.println("size:" + list.size());
		System.out.println("222");

		return list;
	}


分页 一个接收查询结果的rest.jsp   ：
引用

<!--<tr><td>ss</td></tr>  //这种格式存储的-->
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<%--<tr><td>ss</td></tr>--%>
<%----%>
<c:forEach items="${qneOrderList}" var="qlist" varStatus="vs">
<tr>
<td>${rowStart+vs.index+1}</td><!--这个很关键 跟在action里面的rowStart直接关联-->
<td>
${qlist.orderNum }
</td>
<td>
<c:if test="${qlist.orderStatus==0}">未出票申请退款</c:if>
<c:if test="${qlist.orderStatus==1}">订座成功待价格确认</c:if>
<c:if test="${qlist.orderStatus==2}">待座位确认</c:if>
<c:if test="${qlist.orderStatus==3}">订座成功待支付</c:if>
<c:if test="${qlist.orderStatus==4}">订单取消</c:if>
<c:if test="${qlist.orderStatus==5}">支付成功待出票</c:if>
<c:if test="${qlist.orderStatus==6}">出票中</c:if>
<c:if test="${qlist.orderStatus==7}">出票完成</c:if>
<c:if test="${qlist.orderStatus==8}">改签申请中</c:if>
<c:if test="${qlist.orderStatus==9}">改签完成</c:if>
<c:if test="${qlist.orderStatus==10}">退票申请中</c:if>
<c:if test="${qlist.orderStatus==11}">退票完成待退款</c:if>
<c:if test="${qlist.orderStatus==12}">退票完成</c:if>
<c:if test="${qlist.orderStatus==13}">待出保订单</c:if>

</td>
<td>
<fmt:formatDate value="${qlist.flightTime1}" type="time"
timeStyle="medium" />
${qlist.startCity }

</td>
<td>
<fmt:formatDate value="${qlist.flightTime1}" type="time"
timeStyle="medium" />
${qlist.endCity }
</td>
<td>
${qlist.flightNum }
</td>
<td>
<fmt:formatDate value="${qlist.finishTime }" type="both" />
</td>
<td>
<fmt:formatDate value="${qlist.flightTime1 }" type="both" />
</td>

<td>
${qlist.onTicketPrice }
</td>
<td>
${qlist.drawer }
</td>


<td>

<a href="javascript:void(0)" onclick="alter(${qlist.id})">修改</a>
<a href="javascript:void(0)" onclick="detail(${qlist.id})">详情</a>
<a href="javascript:void(0)" onclick="drop(${qlist.id})">删除</a>
<%-- <a href="javascript:void(0)" onclick="dropOrderButton()"></a>--%>

</td>

</tr>
</c:forEach>

<script>
pagesTotal = ${sum};  // 得到后台处理的最大条数把它传给show.jsp页面 </script>



先说到这儿，分页就可以实现了，而已还有ajax 获取值绑定在select中哦。
ajax 获取值绑定在select中用到的Action方法：
public ActionForward getUsersByPurviewValues(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response)
			throws Exception {
		String pvs = request.getParameter("purviewValues");
		String[] pvArr = null;
		if(pvs != null) {
			pvArr = pvs.split(",");
		}
        String json = iUserSetService.getUsersByPurviewValues(pvArr);
        PrintWriter pw = response.getWriter();
		pw.print(json);
		pw.close();
        return null;
	}

ajax 获取值绑定在select中用到的Dao方法：
/**
	 * 通过权限值得到用户json串
	 * @param pvArr权限值数组
	 * @return
	 * @throws Exception 
	 */
	@SuppressWarnings("unchecked")
	public String getUsersByPurviewValues2(String[] pvArr) throws Exception {
		String orS = MyUtils.getOrStr(pvArr, "p.value", true);
		String temp = orS.length()>0?" WHERE "+orS:"";
		String sql ="SELECT"+ 
					"	h.handlerID,h.name,p.value "+
					"FROM "+
					"	tb_handler h "+
					"	INNER JOIN tb_group g ON h.group_id=g.id "+
					"	LEFT OUTER JOIN tb_group_purview gp ON g.id=gp.group_id "+
					"	INNER JOIN tb_purview p ON p.id=gp.purview_id "+
					temp+
					"UNION "+
					"SELECT "+
					"	h.handlerID,h.name,p.value "+
					"FROM "+
					"	tb_handler h "+
					"	LEFT OUTER JOIN tb_personal_purview pp ON h.handlerID=pp.hanlder_id "+
					"	INNER JOIN tb_purview p ON p.id=pp.purview_id "+
					temp;
		
		Session session = getSession();
		List l = session.createSQLQuery(sql).list();
		StringBuilder sb = new StringBuilder();
		for (Iterator iterator = l.iterator(); iterator.hasNext();) {
			Object[] o = (Object[]) iterator.next();
			sb.append("{id:'"+ o[0] +"',username:'"+o[1]+"',purviewValue:'"+o[2]+"'},");
		}
		if(!"".equals(sb.toString())) {
			sb.delete(sb.lastIndexOf(","), sb.length());
			sb.insert(0, "[");
			sb.append("]");
		}
		return sb.toString();
	}


好好研究下 一定会让你收获不菲的哦！


  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.