仿淘宝ajax分页控件带例子

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

 //html代码

 <table id="commentTab" width="100%;">
</table>
 <div id="meneameFy"></div>

 

 

 

//分页控件输出以及判断的主要方法
function pageInit(s){
	currsPage=s;//当前页码 (注意是传过来的)
	var totalPage = "${totalPage}";		//最大页码(从后台传递过来的)
	var grountCount = 9;	//每组显示的个数 (可以自定义)
	var currsPageYM = currsPage+4;	//页面显示的页码最大值
	var strSpan = "";			//向页面输出值
	if(totalPage < grountCount){	//最大页码小于每组的显示个数,直接输出所有页码
		if(currsPage == 1){
			strSpan = "<span class='disabled'> < </span>";
		}else{
			strSpan = "<a href='javascript:Page(1);'> < </a>";
		}
		for(var j = totalPage;j>0;j--){
			var bb = totalPage - j+1;
			if(bb == currsPage){
				strSpan = strSpan+"<span class='current'>"+bb+"</span>";
			}else{
				strSpan = strSpan+"<a href='javascript:Page("+bb+");'>"+bb+"</a>";
			}
			if(bb == totalPage){
				break;
			}
		}
		if(currsPage == totalPage){
			strSpan = strSpan+"<span class='disabled'> > </span>";
		}else{
			strSpan = strSpan+"<a href='javascript:Page("+totalPage+");'> > </a>";
		}
	}else if(currsPageYM >= totalPage){		//页面显示的页码最大值大于或等于最大页码,及最后一组页码显示,做特殊处理
		if(currsPage == 1){
			strSpan = "<span class='disabled'> < </span>";
			currsPageYM = grountCount;
		}else{
			strSpan = "<a href='javascript:Page(1);'> < </a>";
		}
		for(var k = grountCount;k>0;k--){
			var bb = totalPage - k+1;
			if(bb == currsPage){
				strSpan = strSpan+"<span class='current'>"+bb+"</span>";
			}else{
				strSpan = strSpan+"<a href='javascript:Page("+bb+");'>"+bb+"</a>";
			}
			if(bb == totalPage){
				break;
			}
		}
		if(currsPage == totalPage){
			strSpan = strSpan+"<span class='disabled'> > </span>";
		}else{
			strSpan = strSpan+"<a href='javascript:Page("+totalPage+");'> > </a>";
		}
	}else{		//页码逻辑正常显示处理
		if(currsPage == 1){
			strSpan = "<span class='disabled'> < </span>";
			currsPageYM = grountCount;
		}else{
			strSpan = "<a href='javascript:Page(1);'> < </a>";
		}
		for(var i = grountCount;i>0;i--){
			var bb = currsPageYM - i+1;
			if(bb == currsPage){
				strSpan = strSpan+"<span class='current'>"+bb+"</span>";
			}else{
				strSpan = strSpan+"<a href='javascript:Page("+bb+");'>"+bb+"</a>";
			}
			if(bb == totalPage){
				break;
			}
		}
		if(currsPage == totalPage){
			strSpan = strSpan+"<span class='disabled'> > </span>";
		}else{
			strSpan = strSpan+"<a href='javascript:Page("+totalPage+");'> > </a>";
		}
	}
	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.length;i++){
						var ss= 
						"<tr><th style='width:100px;'>评论昵称:</th><td>"+data.rows[i].nicheng+"</td></tr>"
 						+"<tr class='capti'>"
					+"<th>评论内容:</th><td><div style='height:100px;width:800px;border:1px solid pink;'>"+data.rows[i].content+"</div><div style='float:right;'>"+data.rows[i].createTime+"</div></td>"
						 	+"</tr>";
						 	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代码

<style>
div#meneameFy{margin:10px 150px;}
div#meneameFy A {
    BORDER-RIGHT: #ff9600 1px solid; PADDING-RIGHT: 7px; BACKGROUND-POSITION: 50% bottom; BORDER-TOP: #ff9600 1px solid; PADDING-LEFT: 7px; BACKGROUND-IMAGE: url(meneame.jpg); PADDING-BOTTOM: 5px; BORDER-LEFT: #ff9600 1px solid; COLOR: #ff6500; MARGIN-RIGHT: 3px; PADDING-TOP: 5px; BORDER-BOTTOM: #ff9600 1px solid; TEXT-DECORATION: none
}
div#meneameFy A:hover {
    BORDER-RIGHT: #ff9600 1px solid; BORDER-TOP: #ff9600 1px solid; BACKGROUND-IMAGE: none; BORDER-LEFT: #ff9600 1px solid; COLOR: #ff6500; BORDER-BOTTOM: #ff9600 1px solid; BACKGROUND-COLOR: #ffc794
}
div#meneameFy A:active {
    BORDER-RIGHT: #ff9600 1px solid; BORDER-TOP: #ff9600 1px solid; BACKGROUND-IMAGE: none; BORDER-LEFT: #ff9600 1px solid; COLOR: #ff6500; BORDER-BOTTOM: #ff9600 1px solid; BACKGROUND-COLOR: #ffc794
}
div#meneameFy SPAN.current {
    BORDER-RIGHT: #ff6500 1px solid; PADDING-RIGHT: 7px; BORDER-TOP: #ff6500 1px solid; PADDING-LEFT: 7px; FONT-WEIGHT: bold; PADDING-BOTTOM: 5px; BORDER-LEFT: #ff6500 1px solid; COLOR: #ff6500; MARGIN-RIGHT: 3px; PADDING-TOP: 5px; BORDER-BOTTOM: #ff6500 1px solid; BACKGROUND-COLOR: #ffbe94
}
div#meneameFy SPAN.disabled {
    BORDER-RIGHT: #ffe3c6 1px solid; PADDING-RIGHT: 7px; BORDER-TOP: #ffe3c6 1px solid; PADDING-LEFT: 7px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffe3c6 1px solid; COLOR: #ffe3c6; MARGIN-RIGHT: 3px; PADDING-TOP: 5px; BORDER-BOTTOM: #ffe3c6 1px solid
}
</style>

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