模仿百度后台分页组件
效果如下:
代码如下:
public String createPageHtml(int totalPages,int pageNo,int showPages,String href) {String htmlstr = "";if(totalPages <= 1) {//只有1页,直接返回空串return htmlstr;} else {if(pageNo <= 0 || pageNo > totalPages) {pageNo = 1;}String href1 = href + "?totalPages=" + totalPages + "&showPages=" + showPages + "&pageNo=";if(pageNo != 1) {String href2 = href1 + (pageNo-1); htmlstr = " <div class=\"fontPage\"><a href=\"" +href2 + "\" style=\"text-decoration: none;\"><上一页</a></div> ";}int loopCount = showPages;int mod = totalPages % showPages;//计算总组数int a = (mod == 0) ? totalPages / showPages : (totalPages / showPages) + 1;//这个a1是代表当前pageNo位于第几组int a1 = pageNo%showPages == 0 ? (pageNo/showPages) : (pageNo/showPages) + 1;if(a == a1 && mod > 0) {loopCount = mod;}//这个startPage是代表当前pageNo所属组的一个元素编号的变量//计算公式是: showPages * 第几组 - showPages + 1int startPage = (showPages * a1) - showPages + 1; for(int i = 1; i <= loopCount; i++) {String href3 = href1 + startPage; String s = " <div class=\"normalPage\"><a href=\"" + href3 + "\" style=\"text-decoration: none;\">" + startPage + "</a></div> ";if(startPage == pageNo) {s = " <div class=\"currPage\"><a href=\"" + href3 + "\" style=\"text-decoration: none;\">" + startPage + "</a></div> ";}htmlstr = htmlstr + s;startPage ++;}String href4 = href1 + (pageNo+1); htmlstr = htmlstr + " <div class=\"fontPage\"><a href=\"" + href4 + "\" style=\"text-decoration: none;\">>下一页</a></div> ";}return htmlstr;}
css如下:
.currPage {float:left;width: 18px;height: 18px;text-align: center;line-height:18px;margin-right: 5px;font-size: 13px;text-decoration: none;}.fontPage {float:left;border: 1px solid;width: 60px;height: 18px;border-color: gray;text-align: center;line-height:18px;margin-right: 5px;font-size: 12px;}.normalPage {float:left;border: 1px solid;width: 18px;height: 18px;border-color: gray;text-align: center;line-height:18px;margin-right: 5px;font-size: 13px;text-decoration: none;}
调用方式如下:
<%=new PageServlet().createPageHtml(totalPages,pageNo,showPages,href) %>