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 += "共" + totalRow + "条";
				if(pageNo > 10) {
					pageBar += "<前10页";
				}
				
				if(pageNo > 1){
					pageBar += "<";
				}
				if(totalPage <= 6){
					for(var i = 1; i <= totalPage; i++){
					    if(pageNo == i){
						    pageBar += ""+i+"";
					    }else{
						    pageBar+=""+i+"";
					    }
					}
				}else{
					var start = pageNo;
					var add = 5;
					if(pageNo < 5){
						start = 1;
						add = add - start;
					}else{
						start = pageNo - 2;
						add = 2;
						pageBar += "1";
						pageBar += "...";
					}
					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 += ""+i+"";
						   }else{
							   pageBar += ""+i+"";
						   }
					}
					if( totalPage - end > 0){
						if(totalPage - end > 1){
						  pageBar+="...";
						}
						pageBar += ""+totalPage+"";
					}
					
				 }
				if(pageNo>";
				}
				//2014-01-20-han-add
				if((parseInt(pageNo)+10) <= totalPage) {
					pageBar+="后10页>";
				}
				
			}
			return pageBar;
		}
})(jQuery);

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