仿淘宝ajax分页控件带例子

阅读更多

 默认生成的样式.自己可以调整.:

 //html代码

 

 

 

//分页控件输出以及判断的主要方法
function pageInit(s){
	currsPage=s;//当前页码 (注意是传过来的)
	var totalPage = "${totalPage}";		//最大页码(从后台传递过来的)
	var grountCount = 9;	//每组显示的个数 (可以自定义)
	var currsPageYM = currsPage+4;	//页面显示的页码最大值
	var strSpan = "";			//向页面输出值
	if(totalPage < grountCount){	//最大页码小于每组的显示个数,直接输出所有页码
		if(currsPage == 1){
			strSpan = " < ";
		}else{
			strSpan = " < ";
		}
		for(var j = totalPage;j>0;j--){
			var bb = totalPage - j+1;
			if(bb == currsPage){
				strSpan = strSpan+""+bb+"";
			}else{
				strSpan = strSpan+""+bb+"";
			}
			if(bb == totalPage){
				break;
			}
		}
		if(currsPage == totalPage){
			strSpan = strSpan+" > ";
		}else{
			strSpan = strSpan+" > ";
		}
	}else if(currsPageYM >= totalPage){		//页面显示的页码最大值大于或等于最大页码,及最后一组页码显示,做特殊处理
		if(currsPage == 1){
			strSpan = " < ";
			currsPageYM = grountCount;
		}else{
			strSpan = " < ";
		}
		for(var k = grountCount;k>0;k--){
			var bb = totalPage - k+1;
			if(bb == currsPage){
				strSpan = strSpan+""+bb+"";
			}else{
				strSpan = strSpan+""+bb+"";
			}
			if(bb == totalPage){
				break;
			}
		}
		if(currsPage == totalPage){
			strSpan = strSpan+" > ";
		}else{
			strSpan = strSpan+" > ";
		}
	}else{		//页码逻辑正常显示处理
		if(currsPage == 1){
			strSpan = " < ";
			currsPageYM = grountCount;
		}else{
			strSpan = " < ";
		}
		for(var i = grountCount;i>0;i--){
			var bb = currsPageYM - i+1;
			if(bb == currsPage){
				strSpan = strSpan+""+bb+"";
			}else{
				strSpan = strSpan+""+bb+"";
			}
			if(bb == totalPage){
				break;
			}
		}
		if(currsPage == totalPage){
			strSpan = strSpan+" > ";
		}else{
			strSpan = strSpan+" > ";
		}
	}
	document.getElementById("meneameFy").innerHTML=strSpan;
}

 

 

 

//ajax分页获取数据方法
function Page(s){
	jQuery("#commentTab tr").remove();
	jQuery.post("getAllCommentProduct.action",{prodId:"${id}",pageNo:s},function(data){
		pageInit(s);
 		for(var i=0;i"
 						+""
					+"评论内容:
"+data.rows[i].content+"
"+data.rows[i].createTime+"
"
						 	+"";
						 	jQuery(ss).appendTo(commentTab);
 		}
 		
 	},"json");
}

 

//页面初始化加载
jQuery(function(){
	<%
	String id=request.getParameter("id");
	request.setAttribute("id", id);
	String totalPage=request.getParameter("totalPage");
	request.setAttribute("totalPage", totalPage);
	String resultSize=request.getParameter("resultSize");
	request.setAttribute("resultSize",resultSize);
	String pageNo = request.getParameter("pageNo");
	request.setAttribute("pageNo", pageNo);
	%>
	pageInit(1);//页面加载初始化传入当前页码为1
	Page(1);//获取第一页面的数据
});

 分页控件的css代码

 默认生成的样式.自己可以调整.

 

• 
• 大小: 9.6 KB

• 查看图片附件