代码改变世界

jquery页面分页（前后台）

2013-01-04 22:43  eoeAndroid社区  阅读(232)  评论(0)  编辑  收藏  举报

效果：   首页 1 2 3 4 5 6 7 尾页



废话不多说上代码

html：

<div id="pageTop"  />

<div id="list" />

<div id="pageDown"  />

jquery:

//分页 begin
			var size=7; //最多显示n个页码标签
			val="<font class='top_09'><a href='${pageContext.request.contextPath}/novel/novelType.do'>首页</a></font>";
			if(data.totalPage<=size) //总数小于页码
			{
				for(var i=1;i<=data.totalPage;i++)
				{
					if(page==i)
						val+="<font class='top_09'><a href='${pageContext.request.contextPath}/novel/novelType.do?page="+i+"&novelTypeId="+typeid+"'><font color='red'>"+i+"</font></a></font>";
					else
						val+="<font class='top_09'><a href='${pageContext.request.contextPath}/novel/novelType.do?page="+i+"&novelTypeId="+typeid+"'>"+i+"</a></font>";
				}
			}else if(page<=Math.floor(size/2))  //当前页小于1/2页码
			{
				for(var i=1;i<=size;i++)
				{
					if(page==i)
						val+="<font class='top_09'><a href='${pageContext.request.contextPath}/novel/novelType.do?page="+i+"&novelTypeId="+typeid+"'><font color='red'>"+i+"</font></a></font>";
					else
						val+="<font class='top_09'><a href='${pageContext.request.contextPath}/novel/novelType.do?page="+i+"&novelTypeId="+typeid+"'>"+i+"</a></font>";
				}
			}else if(data.totalPage-page<=Math.floor(size/2))  //当前页在1/2末尾
			{
				for(var i=data.totalPage-size;i<=data.totalPage;i++)
				{
					if(page==i)
						val+="<font class='top_09'><a href='${pageContext.request.contextPath}/novel/novelType.do?page="+i+"&novelTypeId="+typeid+"'><font color='red'>"+i+"</font></a></font>";
					else	
						val+="<font class='top_09'><a href='${pageContext.request.contextPath}/novel/novelType.do?page="+i+"&novelTypeId="+typeid+"'>"+i+"</a></font>";
				}
			}else //当前页在中间
			{
				for(var i=page-Math.floor(size/2);i<=page+Math.floor(size/2);i++)
				{
					if(page==i)
						val+="<font class='top_09'><a href='${pageContext.request.contextPath}/novel/novelType.do?page="+i+"&novelTypeId="+typeid+"'><font color='red'>"+i+"</font></a></font>";
					else	
						val+="<font class='top_09'><a href='${pageContext.request.contextPath}/novel/novelType.do?page="+i+"&novelTypeId="+typeid+"'>"+i+"</a></font>";
				}	
			}
			val+="<font class='top_09'><a href='${pageContext.request.contextPath}/novel/novelType.do?page="+data.totalPage+"&novelTypeId="+typeid+"'>末页</a></font>";
			$("#pageDown").html(val);
			$("#pageTop").html(val);