思想:当查出来的数据很多时(例如:超过10万),采用精简的默认的样式,也就是指只显示首尾页上一页 和下一页。当总页数不大于9页时,把所有的具体页码以按钮形式显示出来,页码按钮如果等于当前则显于背景色。当总页数大于9页,分页样式以另外的样式显示,当当前页小于3页或大于等于后两页时,显示前六页的按钮和后两页按钮,其他情况显示前两页和后两页按钮,中间显示当前页码的和它后5页的页码,并且支持页码跳转,废话不多说,献上部分实现代码;
//跳转的样式
String tiao="<form style=\"display:inline;color:gray;\"action="+url+" method=\"get\">"
+ " "
+ "<input name=\"curpage\" type=\"text\" style=\"width:30px;\"/>"
+ "<input type=\"hidden\"name=\"pagesize\" value="+pagesize+">"
+ " <input style=\"font-weight:bold;\"type=\"submit\" value=\"跳转\"/>"
+ "</form>";
//简单的样式,默认样式
String all=first+pre+next+last
+"<span>"+curpage+"/"
+sumPage+"一共有"+total+"条记录"
+"</span>"+tiao;
//样式一,如果总页数不大于9页,则输出所有页数
String allPage="";
if(sumPage<=9){
allPage = bindAllPage(1,pattern, sumPage,sumPage, allPage);
all=pre+allPage+next
+"<span>"+"当前第"+curpage+"页"+"/"
+"共"+sumPage+"页"+" 共"+total+"条记录"
+"</span>"+tiao;
}else{//样式二,当总页数大于9时显示
//第一、第二页
String one=bindAllPage(1,pattern, 2,sumPage, allPage);
//最后一页和倒数第一页
String floot=bindAllPage(sumPage-1,pattern, sumPage,sumPage, allPage);
if(curpage>2&&curpage<=sumPage-2){//当当前页小于后两页大于前两页时
allPage = bindAllPage(curpage,pattern, curpage+5,sumPage-2, allPage);
all=pre+one+"..."+allPage+"..."+floot
+"<span>"+next+"当前第"+curpage+"页"+"/"
+"共"+sumPage+"页"+" 共"+total+"条记录"
+"</span>"+tiao;
}else{//当当前页不大于前两页时,显示前六页
allPage = bindAllPage(3,pattern, 6,sumPage, allPage);
all=pre+one+allPage+"..."+floot
+"<span>"+next+"当前第"+curpage+"页"+"/"
+"共"+sumPage+"页"+" 共"+total+"条记录"
+"</span>"+tiao;
}
}
getJspContext().getOut().print(all);
}
还有需要一个绑定页码方法,还用于强调当前页的样式,因为这里面都有用到,所以重构了这个方法:
/**
* 绑定要显示的页数方法
* @param nub开始页数
* @param pattern
* @param page截止页数
* @param sumPage总页数
* @param allPage要输出的页数
* @return
*/
private String bindAllPage(int nub,String pattern, int page,int sumPage, String allPage) {
for( int i=nub;i<=page&&i<=sumPage;i++){
if(i==curpage){
allPage+=MessageFormat.format(pattern,
url,i,pagesize,where,
"<input style=\"color:white;background:#00CCFF;\" type=\"button\"value="+i+">"
);
}else{
allPage+=MessageFormat.format(pattern,
url,i,pagesize,where,"<input type=\"button\"value="+i+">"
);
}
}
return allPage;
}
显示效果如下:
小于9页时:
大于9页并且当前页不大于2时或大于等于后两页时:
其他情况:
完整代码:
import java.io.IOException; import java.text.MessageFormat; import javax.servlet.jsp.JspException; import javax.servlet.jsp.tagext.SimpleTagSupport; /** * 分页标签处理类 * @author DAM * */ public class PageTag extends SimpleTagSupport { private String url;//链接地址 private int curpage;//当前页数 private int pagesize;//一页中要显示的记录数 private int total;//总的记录数 private String where;//查询的条件名称 private String wheredata;//查询的条件值 public String getUrl() { return url; } public void setUrl(String url) { this.url = url; } public int getCurpage() { return curpage; } public void setCurpage(int curpage) { this.curpage = curpage; } public int getPagesize() { return pagesize; } public void setPagesize(int pagesize) { this.pagesize = pagesize; } public int getTotal() { return total; } public void setTotal(int tatal) { this.total = tatal; } public String getWhere() { return where; } public void setWhere(String where) { this.where = where; } public String getWheredata() { return wheredata; } public void setWheredata(String wheredata) { this.wheredata = wheredata; } @Override public void doTag() throws JspException, IOException { super.doTag(); String pattern="<a href=\"{0}?curpage={1}&pagesize={2}&"+where+"={3}\">{4}</a>"; int sumPage=(total-1)/pagesize+1;//总页数 wheredata=wheredata==null?"":wheredata; //上一页 String pre=null; if(curpage<=1){ pre="<a href=\"javascript:void(0)\"><input type=\"button\"value=\"上一页\"></a>"; }else{ pre=MessageFormat.format(pattern, url,curpage-1,pagesize,wheredata,"<input type=\"button\"value=\"上一页\">"); } //下一页 String next=null; if(curpage>=sumPage){ next="<a href=\"javascript:void(0)\"><input type=\"button\"value=\"下一页\"></a>"; }else{ next=MessageFormat.format(pattern, url,curpage+1,pagesize,wheredata,"<input type=\"button\"value=\"下一页\">"); } //首页 String first=MessageFormat.format(pattern, url,1,pagesize,wheredata,"<input type=\"button\"value=\"首页\">"); //尾页 String last=MessageFormat.format(pattern, url,sumPage,pagesize,wheredata,"<input type=\"button\"value=\"尾页\">"); //跳转的样式 String tiao="<form style=\"display:inline;color:gray;\"action="+url+" method=\"get\">" + " " + "<input name=\"curpage\" required=\"required\"value="+curpage+" type=\"number\" max="+sumPage+" min=\"1\"style=\"width:50px;\"/>" + "<input type=\"hidden\"name=\"pagesize\" value="+pagesize+">" + "<input type=\"hidden\"name="+where+" value="+wheredata+">" + " <input style=\"font-weight:bold;\"type=\"submit\" value=\"跳转\"/>" + "</form>"; //简单的样式,默认样式 String all=first+pre+next+last +"<span>"+curpage+"/" +sumPage+"一共有"+total+"条记录" +"</span>"+tiao; //样式一,如果总页数不大于9页,则输出所有页数 String allPage=""; if(sumPage<=9){ allPage = bindAllPage(1,pattern, sumPage,sumPage, allPage); all=pre+allPage+next +"<span>"+"当前第"+curpage+"页"+"/" +"共"+sumPage+"页"+" 共"+total+"条记录" +"</span>"+tiao; }else{//样式二,当总页数大于9时显示 //第一、第二页 String one=bindAllPage(1,pattern, 2,sumPage, allPage); //最后一页和倒数第一页 String floot=bindAllPage(sumPage-1,pattern, sumPage,sumPage, allPage); if(curpage>2&&curpage<=sumPage-2){//当当前页小于后两页大于前两页时 allPage = bindAllPage(curpage,pattern, curpage+5,sumPage-2, allPage); all=pre+one+"..."+allPage+"..."+floot +"<span>"+next+"当前第"+curpage+"页"+"/" +"共"+sumPage+"页"+" 共"+total+"条记录" +"</span>"+tiao; }else{//当当前页小于3页或大于等于后两页时,显示前六页的按钮和后两页按钮, allPage = bindAllPage(3,pattern, 6,sumPage, allPage); all=pre+one+allPage+"..."+floot +"<span>"+next+"当前第"+curpage+"页"+"/" +"共"+sumPage+"页"+" 共"+total+"条记录" +"</span>"+tiao; } } getJspContext().getOut().print(all); } /** * 绑定要显示的页数方法 * @param nub开始页数 * @param pattern * @param page截止页数 * @param sumPage总页数 * @param allPage要输出的页数 * @return */ private String bindAllPage(int nub,String pattern, int page,int sumPage, String allPage) { for( int i=nub;i<=page&&i<=sumPage;i++){ if(i==curpage){ allPage+=MessageFormat.format(pattern, url,i,pagesize,wheredata, "<input style=\"color:white;background:#00CCFF;\" type=\"button\"value="+i+">" ); }else{ allPage+=MessageFormat.format(pattern, url,i,pagesize,wheredata,"<input type=\"button\"value="+i+">" ); } } return allPage; } }
XML代码:
<?xml version="1.0" encoding="utf-8"?> <taglib xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd" version="2.0"> <tlib-version>2.0</tlib-version> <short-name>caipu</short-name> <uri>http://www.eleme.com/caipu</uri> <tag> <name>page</name> <tag-class>cn.gson.cai.model.tags.PageTag</tag-class> <body-content>empty</body-content> <attribute> <name>url</name> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>curpage</name> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>pagesize</name> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>total</name> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>where</name> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>wheredata</name> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> </tag> </taglib>
路径:
在jsp页面中使用:
<div>
<p:page url="CaiPuSelectServlet" pagesize="${param.pagesize }" total="${map.total}" curpage="${param.curpage }" />
</div>
jsp页面分页样式:
/* 分页样式 */ #page,#page a{ margin:10px 8px 10px 0px; } #page span,#page input{ font-size:12px; color:gray; } #page input{ cursor: pointer; background: white; border:1px solid lightgray; border-radius:5px; padding:2px 6px; } #page input:hover{ font-size:13px; }