ajax页面分页效果的呈现

 

 

 

 

如果您想看到具体的例子，请下载也行。分页小程序.rar

在页面上进行分页。如果你想显示这种效果的话，您可以参考一下。

(function($){
	$.GaapUtils = {
		page : function(totalPage,pageNo,totalRow) {
			totalPage = parseInt(totalPage);
			pageNo = parseInt(pageNo);
			var pageBar = "";
			
			if(pageNo > 0 && totalPage >= 1) {
				//2014-01-20-han-add
				pageBar += "<span class=\"pages\">共<font color=\"blue\">" + totalRow + "</font>条</span>";
				if(pageNo > 10) {
					pageBar += "<a style=\"cursor:pointer;\" title=\"前10页\" onclick=\"go(" + (parseInt(pageNo)-10) + ")\">&lt;前10页</a>";
				}
				
				if(pageNo > 1){
					pageBar += "<a style=\"cursor:pointer;\" class=\"prev\" title=\"上一页\" onclick=\"go(" + (parseInt(pageNo)-1) + ")\">&lt;</a>";
				}
				if(totalPage <= 6){
					for(var i = 1; i <= totalPage; i++){
					    if(pageNo == i){
						    pageBar += "<a style=\"cursor:pointer;\" class=\"current\" onclick=\"go("+i+")\">"+i+"</a>";
					    }else{
						    pageBar+="<a style=\"cursor:pointer;\" onclick=\"go("+i+")\">"+i+"</a>";
					    }
					}
				}else{
					var start = pageNo;
					var add = 5;
					if(pageNo < 5){
						start = 1;
						add = add - start;
					}else{
						start = pageNo - 2;
						add = 2;
						pageBar += "<a style=\"cursor:pointer;\" onclick=\"go("+1+")\">1</a>";
						pageBar += "<span>...</span>";
					}
					var end = pageNo + add;
					if(end > totalPage){
						end = totalPage;
					}
					if((end - pageNo) > 2){
						end = pageNo + 2;
					}
					if(end > add){
					 if(end - start < add){
						start = end - add;
					 }
					}
					
					for(var i = start;i <= end; i++){
						   if(pageNo == i){
							   pageBar += "<a style=\"cursor:pointer;\" class=\"current\" onclick=\"go("+i+")\">"+i+"</a>";
						   }else{
							   pageBar += "<a style=\"cursor:pointer;\" onclick=\"go("+i+")\">"+i+"</a>";
						   }
					}
					if( totalPage - end > 0){
						if(totalPage - end > 1){
						  pageBar+="<span>...</span>";
						}
						pageBar += "<a style=\"cursor:pointer;\" onclick=\"go("+totalPage+")\">"+totalPage+"</a>";
					}
					
				 }
				if(pageNo<totalPage){
					pageBar+="<a style=\"cursor:pointer;\" class=\"next\" title=\"下一页\" onclick=\"go("+ (parseInt(pageNo)+1) +")\">&gt;</a>";
				}
				//2014-01-20-han-add
				if((parseInt(pageNo)+10) <= totalPage) {
					pageBar+="<a style=\"cursor:pointer;\" title=\"后10页\" onclick=\"go("+ (parseInt(pageNo)+10) +")\">后10页&gt;</a>";
				}
				
			}
			return pageBar;
		}
})(jQuery);

<!--分页-->
 <div class="fpage" id="pages"></div>

                        /**
			    显示分页样式
			*/
			var totalPage = "${pageBean.totalPage }";
			var pageNo = "${pageBean.pageNo}";
			var totalRow = "${pageBean.totalRow}";
			if(totalPage && totalPage >= 1) {
				$("#pages").html($.GaapUtils.page(totalPage,pageNo,totalRow));
			}