默认生成的样式.自己可以调整.:
//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>
默认生成的样式.自己可以调整.