关于分页

最新推荐文章于 2024-10-28 14:50:43 发布

原创最新推荐文章于 2024-10-28 14:50:43 发布 · 498 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jsp #表单

今天遇到页面分页的问题，搞了半天头都大了，一直没解决问题，都快奔溃了，好在同事张远帮忙最后解决。现在回顾一下，稍作记录，以作前车之鉴。

我做的是吉祥人寿网销调查问卷汇总，进入后台后选择左侧导航栏点击问卷调查情况汇总，右侧是一个frameset框架集页面，包含了五个frame部分，分别是

fraSearchForm(查询条件页面)、fraToolbar(操作工具条页面)、fraSearchList(查询结果页面)、frapage(分页页面)和默认为空的隐藏页面fraHidden，这五部分构成了

index.jsp。

在查询结果页面列出了各问卷的详情list，点击单个问卷名称，会弹出该问卷的用户回答情况汇总，该页面汇总了该问卷的答题人数，每道题的答题数，每个选项的回答人

数及其占比。该问卷的回答人数是一个链接，点击后又会弹出参与答题的用户列表，问题就出在这个页面的分页。

<%@ page language="java" contentType="text/html;charset=GBK"%>
<%@ include file="/global/ui/taglibs.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<link href="${ctx}/global/css/misBasic.css" rel="stylesheet" type="text/css">
	<script src="${ctx}/global/js/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="${ctx}/global/js/jquery.qtip-1.0.0-rc3.js"></script>
</head>
<style>
	 .showdivlit{
	    float:center;
		width:300px;
		height:80px;
		align:center;
		background-color:#709CD2;
		border:2px solid #709CD2;
		padding:0px;
		display:none;
	 }
	 .textarealit{
	  width:300px;
	  height:80px;
	}
	.image{
	 float:right;
	}
</style>
<body topmargin="2" leftmargin="2">
	<form id="frmInput" name="frmInput" method="post" action="${ctx}/business/nonBusinessManager/questionnaireSurvey/frmSearch2.do">	
	 <input type="hidden" name="surveyId" id="surveyId" value="${users[0]['surveyid']}"/>
	 <input type="hidden" name="pageNo" id="pageNo" value=""/>
	 <input type="hidden" name="pageSize" id="pageSize" value="${pageSize}"/>
	</form>
	<table width="100%" class="table_Show" id="data_table">
	<tr>
<!-- 		 <td class="search_head" width="25" nowrap><input type="checkbox" onclick="checkAll(this)" style="border: 0px" ></td> -->
		<td class="search_head" nowrap id="idNum">序号</td>
		<td class="search_head" nowrap>手机号码</td>
		<td class="search_head" nowrap>邮箱</td>
		<td class="search_head" nowrap>回答时间</td>
	</tr>
	<c:forEach items="${users}" var="queryuser" begin="0" end="${totalCount}" step="1" varStatus="status">
		<tr id="tr_${status.index}"}"class="${status.index%2 == 0?'':'search_tr_ou'}">
			<td class="search_body_center" nowrap>${status.index+1+pageSize*(pageNo-1)}</td>
			<td class="search_body_center" nowrap>
				<a href="javascript:partyDetialOpenWindow('${ctx}/business/nonBusinessManager/questionnaireSurvey/view.do?surveyid=${queryuser['surveyid']}&serialNo=${queryuser['serialNo']}')">
					${queryuser["mobilephone"]}
				</a>
			</td>
			<td class="search_body_center" nowrap>
				${queryuser["email"]}
			</td>
			<td class="search_body_center" nowrap>
			<fmt:formatDate value="${queryuser['submittime']}" pattern="yyyy-MM-dd" />
			</td>
		</tr>
	</c:forEach>
	
	<c:if test="${empty users || totalCount == 0}">
		<tr>
			<td colspan="7">
				<jsp:include page="/global/ui/noResult.jsp"></jsp:include>
			</td>
		</tr>
	</c:if>
	</table>
	
	<div id="page">
	<div style="height:15px;"> </div>
	<table id="pageContent" class="page_bg" align="center" border=0>
		<tr>
			<td align="center" valign="middle">
				<table align="center" style="height:24px;text-align:center;" cellspacing="0" cellpadding="0" border=0>
					<tr>
						<td valign="middle"><a href="#" id="tdFirst"> </a></td>
						<td style="padding-right:6px;"><a href="#" id="tdPrevious"> </a></td>
						<c:if test="${totalPage gt 6 }">
							<td id="pageSpan" valign="middle">
								<c:if test="${totalPage ne pageNo }">
									<c:if test="${pageNo gt 4 }">
										<label style="float:left;color:6c6c6c;padding:7px 0px 0px 2px;">…</label>
									</c:if>
					        		<c:if test="${pageNo + 2 - totalPage gt 0}">
					        			<c:if test="${pageNo - 3 ge 0}">
					 						<c:forEach begin="${totalPage - 5 }" end="${totalPage}" varStatus="item">
					 					 		<a href="#" onclick="goPage('${item.index}');" class="otherPage">${item.index}</a>
					 						</c:forEach>
					 					</c:if>
					        		</c:if>
					        		<c:if test="${pageNo -3  gt 0 && totalPage - pageNo ge 2}">
					         			<c:forEach begin="${pageNo - 3}" end="${pageNo + 2}" varStatus="item">
					        				<a href="#" onclick="goPage('${item.index}');" class="otherPage">${item.index}</a>
					        			</c:forEach>
					          		</c:if>
					        		<c:if test="${pageNo - 3  le 0 }">
								 		<c:forEach begin="1" end="${pageNo + 2 lt 6 ? '6' : pageNo + 2}" varStatus="item">
							 				<a href="#" onclick="goPage('${item.index}');" class="otherPage">${item.index}</a>
										</c:forEach>
					          		</c:if>
									<c:if test="${pageNo + 2  lt totalPage }">
					         			<label style="float:left;color:6c6c6c;padding:7px 2px 0px 0px;">…</label>
					          		</c:if>
					          	</c:if>
					          	<c:if test="${totalPage eq pageNo }">
					          		<label style="float:left;color:6c6c6c;padding:7px 0px 0px 2px;">…</label>
					       			<c:forEach begin="${totalPage - 5}" end="${totalPage }" varStatus="item">
					       				<a href="#" onclick="goPage('${item.index}');" class="otherPage">${item.index}</a>
					     			</c:forEach>
					       		</c:if>
					       		 
							</td>
						</c:if>
						<c:if test="${totalPage le 6 }">
							<td id="pageSpan">
								<c:forEach begin="1" end="${totalPage }" varStatus="item">
					       			<a href="#" onclick="goPage('${item.index}');"  class="otherPage">${item.index}</a>
					     		</c:forEach>
					     		 
							</td>
						</c:if>
						<td valign="middle"><a href="#" id="tdNext"> </a></td>
						<td><a href="#" id="tdEnd"> </a></td>
					</tr>
				</table>
			</td>
			<td id="totalPage" style="display:none;width:180px;padding-right:15px;">
				<div id="spinfo" style="float:right;"></div>
				<c:if test="${!empty totalPage}">
					<div style="padding-top:3px;float:right;">
						<select id='allPage' name='allPage' onchange='javascript:goSearch(this.selectedIndex + 1)' >
							<c:forEach  begin="1" end="${totalPage}" step="1" varStatus="status">
						 		<option value="${status.index}" ${status.index == pageNo?"selected":""}>${status.index}</option>
							</c:forEach>
						</select>
					</div>
					<div style="float:right;" id="spselect">跳转至 </div>
				</c:if>
			</td>
			<td width="125px">
				<div style="float:left;">每页显示 </div>
				<div style="padding-top:3px;float:left;">
					<select id="pageSize" name="pageSize" onchange="goSearchByPageSize();">
						<option value="10" ${pageSize == 10 ?"selected":""}>10</option>
						<option value="20" ${pageSize == 20||empty pageSize ?"selected":""}>20</option>
						<option value="50" ${pageSize == 50 ?"selected":""}>50</option>
					</select>
				</div>
				<div style="float:left;"> 条</div>
			</td>
		</tr>
	</table>
</div>
</body>
<script type="text/javascript">
	/* window.parent.frames[3].document.location.href = "${ctx }/global/inc/page.jsp?pageNo=${page.currentPageNo}&pageSize=${page.pageSize}&totalCount=${page.totalCount}&totalPage=${page.totalPageCount}"; */
	
	//编辑
	function doEdit(idStr){
	//	window.open("${ctx}/business/nonBusinessManager/questionnaireSurvey/viewGeSurvey.do?geSurveyMain.serialNo=" + idStr,"显示问卷" ,"top=50, left=20, width=980,height=600,scrollbars=yes,toolbar=no");		
	}
	//导出
	function exportToExcel(idStr){
	//	window.location.href("${ctx}/business/nonBusinessManager/questionnaireSurvey/exportToExcel.do?geSurveyMain.serialNo=" + idStr);		
	}
	function exportResultToExcel(idStr){
	//	window.location ="${ctx}/business/nonBusinessManager/questionnaireSurvey/exportResultToExcel.do?geSurveyMain.serialNo=" + idStr;
	}
	$(document).ready(function() {
		//pop提示信息
	   	var showCeng = document.getElementsByName("showCeng");
	   	var ids = ['showCeng'];
		var contents = ['点击查看详细','点击查看详细','点击查看详细','点击查看详细','点击查看详细','点击查看详细','点击查看详细','点击查看详细','点击查看详细','点击查看详细','点击查看详细','点击查看详细','点击查看详细','点击查看详细','点击查看详细','点击查看详细','点击查看详细','点击查看详细','点击查看详细','点击查看详细','点击查看详细','点击查看详细','点击查看详细','点击查看详细'];
		for ( var i = 0 ; i < 21 ; i++ ){
			$(showCeng[i]).qtip({ 
				content:contents[i], 
				position: { 
					corner: { 
						tooltip: 'leftMiddle', 
						target: 'rightMiddle'
					} 
				}, 
				 style: { 
				border: { 
					width: 2,
					radius: 2,
					color: '#FF0A47'
					},
					width:100,
					padding: 10, 
					textAlign: 'left',
					background: '#FFECDD', 
					tip:true//控制左侧尖角是否出现
					//name: 'green' 
				} 
				
			}); 
		}
		//pop提示信息结束
	})				
	
	//打开div
function showInLit(obj){
	var flag = true;
	var imgdiv = $(obj);
	imgdiv.find("div").each(function(){
		if(flag) {
			var showdiv = $(this);
			var classdiv = showdiv.attr("class");
			if(classdiv == "showdivlit") {
				showdiv.show();
				flag = false;
				return;
			}
		}
		
	});
}  
//关闭小的div
function hideInLit(obj){
	var flag = true;
	var imgdiv = $(obj);
	imgdiv.parents("div").each(function(){
		if(flag) {
			var showdiv = $(this);
			var classdiv = showdiv.attr("class");
			if(classdiv == "showdivlit") {
				showdiv.slideUp();
				flag = false;
				return;
			}
		}
	});
}

function checkSingleRow(no,taskID){
	var idStr = "";
	var count = 0;
	var checkArray = document.getElementsByName("checkChild");
	var tr_selected;
	var value_checked;
	var status = "";
	for (var i = 0; i < checkArray.length; i++){
		tr_selected = document.getElementById("tr_" + i);
		if(checkArray[i].checked){
			tr_selected.className = "search_tr_selected";
			value_checked = checkArray[i].value;
			if(idStr == ""){
				idStr = value_checked;
			}else {
				idStr = idStr + "," + value_checked;
			}
			count++;
		}else{
			if(i%2 == 0){
				tr_selected.className = "";
			}else{
				tr_selected.className = "search_tr_ou";
			}
		}
	}
	status = document.getElementById("status_"+no);
	
	//top.frames[1].frames[2].frames[1].document.getElementById("status").value = status.value;
	
	// window.parent.frames[1].document.getElementById("status").value = status.value;
	
	window.parent.frames[1].document.getElementById("idStr").value = idStr;
	window.parent.frames[1].document.getElementById("count").value = count;
	//window.parent.frames[1].document.getElementById("taskID").value = taskID;
	// window.parent.frames[1].document.getElementById("workFlowID").value = workFlowID;
}

function partyDetialOpenWindow(obj) {
	window.open(obj, "商品赠送活动详细介绍", "top=100, left=100, width=900, height=600, scrollbars, resizable=yes");
}
</script>
<script type="text/javascript">
	var frmSearch = window.parent.frames[0];
	var search = window.parent.frames[2];
	var pageSize = 0;
	var pageNo = 0;
	var totalCount = 0;
	var totalPage = 0;
	if("${pageSize}" != ""){
		pageNo = ${empty pageNo ? 0 : pageNo};
		pageSize = ${empty pageSize ? 0 : pageSize};
		totalCount = ${empty totalCount ? 0 : totalCount};
		totalPage = ${empty totalPage ? 0 : totalPage};
	}
	
	$(document).ready(function(){
		if(pageNo > 4 && totalPage > 6){/**home*/
			$("#tdFirst").removeClass("tdFirst_disabled").addClass("tdFirst");
			$("#tdFirst").bind({
				click:function(){
					goSearch(1);
				}
			});
		}else{
			$("#tdFirst").removeClass("tdFirst").addClass("tdFirst_disabled");
			$("#tdFirst").unbind("click");
		}
		
		if(pageNo > 1){/**pgUp*/
			$("#tdPrevious").removeClass("tdPrevious_disabled").addClass("tdPrevious");
			$("#tdPrevious").bind({
				click:function(){
					goSearch(pageNo-1);
				}
			});
		}else{
			$("#tdPrevious").removeClass("tdPrevious").addClass("tdPrevious_disabled");
			$("#tdPrevious").unbind("click");
		}
		
		if(totalPage > pageNo){/**pgDown*/
			$("#tdNext").removeClass("tdNext_disabled").addClass("tdNext");
			$("#tdNext").bind({
				click:function(){
					goSearch(pageNo+1);
				}
			});
		}else{
			$("#tdNext").removeClass("tdNext").addClass("tdNext_disabled");
			$("#tdNext").unbind("click");
		}
		
		if(totalPage > pageNo+2 && totalPage > 6){/**end*/
			$("#tdEnd").removeClass("tdEnd_disabled").addClass("tdEnd");
			$("#tdEnd").bind({
				click:function(){
					goSearch(totalPage);
				}
			});
		}else{
			$("#tdEnd").removeClass("tdEnd").addClass("tdEnd_disabled");
			$("#tdEnd").unbind("click");
		}
		
		$("#pageSpan").find("a").each(function(){
			if($(this).text() == (pageNo)){
				$(this).removeClass("otherPage").addClass("currentPage");
				//$(this).css("color", "#FFFFFF");
			}
				$(this).bind({
					mousemove : function() {
						if($(this).text() != $("#pageNo").val()){
							$(this).css("color", "#FFFFFF");
						}
					},
					mouseout:function(){
						if($(this).attr("class") != "currentPage"){
							$(this).addClass("otherPage");
							$(this).css("color", "#6c6c6c");
						}
					}
					
				});
		});
	
		/** set spinfo text */
		if(pageNo != null && pageNo != "") {
			$("#spinfo").html("  共" + totalCount +"条");
			$("#totalPage").show();
		}

		/** set pageSize */
		var obj = document.getElementById("pageSize");
		if(pageSize == 10) {
			$("#pageSize").attr("selectedIndex",0);
		} else if(pageSize == 50) {
			$("#pageSize").attr("selectedIndex",2);
		} else {
			$("#pageSize").attr("selectedIndex",1);
		}
	});
	
	function goSearchByPageSize(){
		pageNo = 1;
		goSearch(pageNo);
	}
	
	function goSearch(x) {
		document.getElementById("pageNo").value = x;
		document.getElementById("pageSize").value = document.getElementById("pageSize").value;
		document.getElementById("frmInput").submit(); 
	}
	function goPage(pageNo){
		document.getElementById("pageNo").value = pageNo;
		document.getElementById("pageSize").value = document.getElementById("pageSize").value; 
		/* window.location.href="${ctx}/business/nonBusinessManager/questionnaireSurvey/frmSearch2.do?surveyId="+$("#surveyId").val()+"&pageNo="+${item.index}+"&pageSize="+1; */
       
		document.getElementById("frmInput").submit(); 
	}
</script>
<script type="text/javascript" src="${ctx}/global/js/checkRows.js"></script>
<%-- <jsp:include page="page.jsp"/> --%>
<%-- <c:import url="page.jsp"/> --%>
</html>

这里将展示与分页合在一张页面，查询条件单独弄出个隐藏的form表单。点击分页的页数，调用JS，为form表单中的pageNo赋值，form表单中的查询条件surveyId、

pageNo、pageSize传到处理的Action——QueryUserAction，跳转search2.jsp，即本页面。