SSH前端分页的几种方式

一、分页说明

<!-- 
	分页说明：
	1：页面参数（action中需要get和set的参数）
		1)keyword：检索词
		2)pageNum：当前页码
		3)pager：分页封装（类Pager，参数：total：数据总条数，datas：数据列表，pageCount：总页数）
		4)pager.pageCount：总页码，封装在Pager类中，直接调用
					
		5)current struts2中org.apache.struts2.util.Counter类封装好的参数，
			Counter类是struts2为页面封装的计数器类，用于循环输出页码，直接使用
	2：分页原理
		理论上页面显示7个页码，当前页左边3个，右边3个，如果总页码数小于7则页面显示的页码为实际页数
					
-->

二、用struts2标签分页

<div id="pagerList">

	<!-- 首页 -->
	<a href="searcharticleslucence?keyword=<s:property value='keyword'/>&pageNum=1">首页</a>
	<!-- 上一页 -->
	<s:if test="pageNum>1">
		<a href="searcharticleslucence?keyword=<s:property value='keyword'/>&pageNum=<s:property value='pageNum-1'/>">上一页</a>
	</s:if>
	<s:if test="pageNum==1">
		<span>上一页</span>
	</s:if>

	<!-- 循环输出7个页数 -->
	<!-- 总页码不超过8页 -->
	<s:if test="pager.pageCount<8">
		<s:set value="1" name="start" />
		<s:set value="pager.pageCount" name="end" />
	</s:if>
	<!-- 总页码大于8页 -->
	<s:if test="pager.pageCount>=8">
		<!-- 当前页页码小于8 -->
		<s:if test="pageNum<8">
	<!-- 判断当前页左边是否能加载三页，pageNum-3<=0不能加载，则加载1~7页 -->
		<s:if test="pageNum-3<=0">
			<s:set value="1" name="start" />
			<s:set value="7" name="end" />
		</s:if>
		<!-- 判断当前页左边是否能加载三页，pageNum-3<=0可以加载，则加载当前页的左边3页、当前页、当前页的右边三页 -->
		<s:if test="pageNum-3>0">
			<s:set value="pageNum-3" name="start" />
			<s:set value="pageNum+3" name="end" />
		</s:if>
	</s:if>
	<!-- 当前页页码大于等于8 -->
	<s:if test="pageNum>=8">
		<!-- 判断当前页右边是否可以加载3页，当前页加3小于等于总页数，当前页右边可以加载3页 -->
		<s:if test="pageNum+3<=pager.pageCount">
			<s:set value="pageNum-3" name="start" />
			<s:set value="pageNum+3" name="end" />
		</s:if>
		<!-- 判断当前页右边是否可以加载3页，当前页加3大于总页数，当前页右边不能加载3页 ，设置最大页码为pager.pageCoun-->
		<s:if test="pageNum+3>pager.pageCount">
			<s:set value="pageNum-3" name="start" />
			<s:set value="pager.pageCount" name="end" />
		</s:if>
	</s:if>
</s:if>
	<!-- 循环页码 -->
	<s:bean name="org.apache.struts2.util.Counter" id="counter">
		<s:param name="first" value="#start"></s:param>
		<s:param name="last" value="#end"></s:param>
		<s:iterator status="st">
			<s:if test="pageNum==current-1">
				<span><s:property /></span>
			</s:if>
			<s:if test="pageNum!=current-1">
				<span><a href="searcharticleslucence?keyword=<s:property value='keyword'/>&pageNum=<s:property />"><s:property /></a></span>
			</s:if>
		</s:iterator>
	</s:bean>

	<!-- 下一页 -->
	<s:if test="pageNum<pager.pageCount">
		<a href="searcharticleslucence?keyword=<s:property value='keyword'/>&pageNum=<s:property value='pageNum+1'/>">下一页</a>
	</s:if>
	<s:if test="pageNum==pager.pageCount">
		<span>下一页</span>
	</s:if>
	<!-- 尾页 -->
	<a href="searcharticleslucence?keyword=<s:property value='keyword'/>&pageNum=<s:property value='pager.pageCount'/>">尾页</a>
</div>

三、用jstl标签分页

<div id="pagerList">
			<!-- 首页 -->
			<a href="searcharticleslucence?keyword=${keyword}&pageNum=1">首页</a>
			<!-- 上一页 -->
			<c:if test="${pageNum>1}">
				<a href="searcharticleslucence?keyword=${keyword}&pageNum=${pageNum-1}">上一页</a>
			</c:if>
			<c:if test="${pageNum==1}">
				<span>上一页</span>
			</c:if>
			
			<!-- 循环输出7个页数 -->
			<!-- 总页码不超过8页 -->
			<c:if test="${pager.pageCount<8 }">
				<c:set value="1" var="start" property="int"/>
				<c:set value="${pager.pageCount}" var="end" property="int"/>
			</c:if>
			<!-- 总页码大于8页 -->
			<c:if test="${pager.pageCount>=8}">
				<!-- 当前页页码小于8 -->
				<c:if test="${pageNum<8}">
					<!-- 判断当前页左边是否能加载三页，pageNum-3<=0不能加载，则加载1~7页 -->
					<c:if test="{pageNum-3<=0}">
						<c:set value="1" var="start" property="int"/>
						<c:set value="7" var="end" property="int"/>
					</c:if>
					<!-- 判断当前页左边是否能加载三页，pageNum-3<=0可以加载，则加载当前页的左边3页、当前页、当前页的右边三页 -->
					<c:if test="pageNum-3>0">
						<c:set value="${pageNum-3}" var="start" property="int"/>
						<c:set value="${pageNum+3}" var="end" property="int"/>
					</c:if>
				</c:if>
				<!-- 当前页页码大于等于8 -->
				<c:if test="${pageNum>=8}">
					<!-- 判断当前页右边是否可以加载3页，当前页加3小于等于总页数，当前页右边可以加载3页 -->
					<c:if test="${pageNum+3<=pager.pageCount}">
						<c:set value="${pageNum-3}" var="start" property="int"/>
						<c:set value="${pageNum+3}" var="end" property="int"/>
					</c:if>
					<!-- 判断当前页右边是否可以加载3页，当前页加3大于总页数，当前页右边不能加载3页 ，设置最大页码为pager.pageCoun-->
					<c:if test="${pageNum+3>pager.pageCount}"> 
						<c:set value="${pageNum-3}" var="start" property="int"/>
						<c:set value="${pager.pageCount}" var="end" property="int"/>
					</c:if>
				</c:if>
			</c:if> 
			
			
			<c:forEach begin="${start}" end="${end}" varStatus="i">
				<c:choose>
				<c:when test="${pageNum==i.current}">
					<span>${i.index}</span>
				</c:when>
				<c:otherwise>
					<a href="searcharticleslucence?keyword=${keyword}&pageNum=${i.index}">${i.index}</a>
				</c:otherwise>
				</c:choose>
			</c:forEach>
			
			<!-- 下一页 -->
			<c:if test="${pageNum<pager.pageCount}">
				<a href="searcharticleslucence?keyword=${keyword}&pageNum=${pageNum+1}">下一页</a>
			</c:if>
			<c:if test="${pageNum==pager.pageCount}">
				<span>下一页</span>
			</c:if>
			<!-- 尾页 -->
			<a href="searcharticleslucence?keyword=${keyword}&pageNum=${pager.pageCount}">尾页</a>
		</div>

四、用javascript分页

function setPagerHTML(){
  		var ctt="";
  		var rsCount=${pager.total};
  		var pageNum=${pageNum};
  		var pageCount=${pager.pageCount};
  		var keyword="${keyword}";
		//上一页按钮
		if(pageNum>1){
			ctt+="<a href=\"searcharticleslucence?keyword=${keyword}&pageNum="+(pageNum-1)+"\">上一页</a>";		
		}else{
			ctt+="<span>上一页</span>";
		}
		//当前页左边两个页码
		if(pageNum>3 & pageCount>3){
			if(pageNum<8){
				ctt+="<a href=\"searcharticleslucence?keyword=${keyword}&pageNum=1\">1</a>";
				if(pageNum>4 & pageCount>7)ctt+="…";
			}else{
				ctt+="<a href=\"searcharticleslucence?keyword=${keyword}&pageNum=1\">1</a>…";
			}
			//右边页码减少时左边页码须增加
			if(pageCount-pageNum<3){
				for(i=pageCount-5;i<pageNum-2;i++){
					if(i>1)ctt+="<a href=\"searcharticleslucence?keyword=${keyword}&pageNum="+i+"</a>";
				}
			}
			for(i=pageNum-2;i<pageNum;i++){
				ctt+="<a href=\"searcharticleslucence?keyword=${keyword}&pageNum="+i+"\">"+i+"</a>";
			}
			ctt+="<span>"+pageNum+"</span>";
		}else{
			for(i=1;i<4;i++){
				if(i>pageCount) break;
				if(i==pageNum){
					ctt+="<span>"+i+"</span>";
				}else{
					ctt+="<a href=\"searcharticleslucence?keyword=${keyword}&pageNum="+i+"\">"+i+"</a>";
				}
			}
		}
		//当前页右边两个页码
		if(pageNum>3){
			for(i=pageNum+1;i<pageNum+3;i++){
				if(i>pageCount) break;
				ctt+="<a href=\"searcharticleslucence?keyword=${keyword}&pageNum="+i+"\">"+i+"</a>";
			}
			if(i<pageCount) ctt+="…<a href=\"searcharticleslucence?keyword=${keyword}&pageNum="+pageCount+"\">"+pageCount+"</a>";
			if(pageNum==(pageCount-3)) ctt+="<a href=\"searcharticleslucence?keyword=${keyword}&pageNum="+pageCount+"\">"+pageCount+"</a>";
		}else{
			for(i=4;i<7;i++){
				if(i>pageCount) break;
				ctt+="<a href=\"searcharticleslucence?keyword=${keyword}&pageNum="+i+"\">"+i+"</a>";
			}
			if(i<pageCount) ctt+="…<a href=\"searcharticleslucence?keyword=${keyword}&pageNum="+pageCount+"\">"+pageCount+"</a>";
			if(i==pageCount) ctt+="<a href=\"searcharticleslucence?keyword=${keyword}&pageNum="+pageCount+"\">"+pageCount+"</a>";
		}
		//下一页按钮
		if(pageNum<pageCount){
			ctt+="<a href=\"searcharticleslucence?keyword=${keyword}&pageNum="+(pageNum+1)+"\">下一页</a>";	
		}else{
			ctt+="<span>下一页</span>";
		}
		
	　	document.getElementById("pagerList3").innerHTML=ctt;
  	}
  	setPagerHTML();