jsp利用自定义标签制作精美的分页标签

xiaoxiao2021-02-28  93

思想:当查出来的数据很多时(例如:超过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; }

转载请注明原文地址: https://www.6miu.com/read-55600.html

最新回复(0)