`

Pager标签库(分页显示)详解

阅读更多
一简介,
Pager-taglib,支持多种风格的分页显示。实际上她是一个Jsp标签库,为在 JSP上显示分页信息而设计的一套标签,通过这些标签的不同的组合,会形成多种不一样的分页页面,风格各异,她自带的DEMO就有七种左右的分页风格,包括Google的分页风格。而需要订制自已的风格的分页页面也非常简单。
分页方式有两种:
一种是从Action中得到一个List,在页面上通过<pg:item>进行自动分页。
第二种是通过把 pageSize,pageNo两参数传给后台进行数据库分页。

二、准备
把pager-taglib.jar放到lib目录下(仅此足亦,完全没必要改 web.xml什么的,还有官方war包中的东西都可以不要)
之后,在JSP页面中使用如下代码:

    <%@ taglib uri= "http://jsptags.com/tags/navigation/pager" prefix= "pg" %> 

三、标签

1、<pg:pager>,在这个标签库里就充当着一个领袖的作用,一切子标签都在它里面工作。就以上出现的参数进行解释一下:
url:分页的链接根地址,pager标签会在这个链接的基础上附加分页参数。该URL不可带参数,因为Pager会在给出的URL后面加上"?page.offset="来标识当前偏移量。
items:总记录数,pager标签正是根据这个值来计算分页参数的

maxPageItems:每页显示的行数,默认为10

maxIndexPages:在循环输出页码的时候,最大输出多少个页码,默认是10 。如设为5的话,则会出现这样的情况 1 2 3 4 5 .或 3 4 5 6 7 这样的形式,其实她自带的DEMO都喜欢把页数展现出来排成一排。

isOffset:与pg:item配套使用,pg:item是用来显示数据的,实际上大多数情况是我们不需要这个标签,该值默认即可
export: 这个属性比较重要,官方文档也对此作好相对长篇幅的说明。这个属性是让标签给你暴露什么变量,当然这些变量是有选择的,如在Pager标签里,可以暴露出 来的变量有pageOffset及pageNumber,即页码偏移量及页码。通过这两个变量名,可以在Jsp或Java里面从Request里获得。 Export属性接受的值还有表达式,如currentPage=pageNumber表示,把pageNumber的值暴露出来,并赋给一个叫 CurrentPage的变量,这个变量将被保存到Request中,在Jsp或Java中可以得到。scope:有Reuqest、page可选。

2、<pg:param>这个标签很有用,用来设置将要加入到URL的参数。使用Name属性指定即可。另一个参数是 pagesize,这个原本可以在url=”/PageAction.do?pagesize=5来做可是,<pg>标签不支持这样做它给我 们提供了另一个传递变量的方法,对了就是我前面标签讲解中所提到过的标<pg:param>
代码

<pg:pager items= "${totalRows} " url= "/PageAction.do?pagesize=5"  


这样传递参数不对,应该写成:
代码

<pg:pager items= "${totalRows}" url= "/PageAction.do" maxIndexPages= "5" > 

<pg:param name=" pagesize " value= "5" /> 

另外由于不需要在页面分页所在<pg:param>要去调
再就是<pg:pager>要有items属性

3、<pg:index>这个标签说明分页条显示的内容,在这里你可以设置各种风格的分页显示方式,本例是google风格的分页条。

4、pg:first【第一页的标签】重要参数说明:
export变量的意义:
pageUrl - 分页链接URL地址(最重要的export参数)
pageNumber - 页码
firstItem - 首页第一行的索引值
lastItem - 首页最后一行的索引值

5、pg:pre【上一页标签】重要参数说明:
export变量的意义:
pageUrl - 分页链接URL地址(最重要的export参数)
pageNumber - 页码
firstItem - 前页第一行的索引值
lastItem - 前页最后一行的索引值

6、pg:next【下一页标签】重要参数说明:
export变量的意义:
pageUrl - 分页链接URL地址(最重要的export参数)
pageNumber - 页码
firstItem - 下页第一行的索引值
lastItem - 下页最后一行的索引值

7、pg:last重要参数说明:
export变量的意义:
pageUrl - 分页链接URL地址(最重要的export参数)
pageNumber - 页码
firstItem - 尾页第一行的索引值
lastItem - 尾页最后一行的索引值

8、pg:pages【这个标签用来循环输出页码信息】重要参数说明:
export变量的意义:
pageUrl - 分页链接URL地址(最重要的export参数)
pageNumber - 页码
firstItem - pageNumber这个页码指定的那一页的第一行的索引值
lastItem - pageNumber这个页码指定的那一页的最后一行的索引值

简单的一个网页标签的使用:
<pg:pager items="1001" export="currentPageNumber=pageNumber">
<pg:first><a href="${pageUrl}">首页</a></pg:first>
<pg:prev><a href="${pageUrl}">前页</a></pg:prev>
<pg:pages>
   <c:choose>
   <c:when test="${pageNumber eq currentPageNumber }">
   <font color="red">${pageNumber }</font>
   </c:when>
   <c:otherwise>
   <a href="${pageUrl }">${pageNumber}</a>
   </c:otherwise>
   </c:choose>
</pg:pages>
<pg:next><a href="${pageUrl}">下页</a></pg:next>
<pg:last><a href="${pageUrl}">尾页</a></pg:last>
</pg:pager>
分享到:
评论
1 楼 lqfACCP 2012-06-29  

相关推荐

    jquery.pager.js分页实现详解

    主要为大家详细介绍了jquery.pager.js分页的实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    MVC分页详解(包括整个流程步骤,代码与注解)

    1、首先写一个Model分页模型MvcPagerInfo.cs(可放入AppCode中) ...6、CSS分页在右下角显示 7、Controller控制器中 8、单纯SQL语句分页,当然你也可以用存储过程进行分页 9、结果http://localhost:XXXX/Admin/View中

    PHP+JQuery+Ajax实现分页方法详解

    分页显示,每页显示15个词语,每组页码有20个,1-20/20-40~~~ 首先是在PHP文件中的分页Pager的相关代码 public function searchWordsByInitial() //从AJAX发出的URL中获得参数:用户点击的字母和点击的页码 $...

    MVC分页详解(包括整个流程代码与注解)

    1、首先写一个Model分页模型MvcPagerInfo.cs可放入AppCode...4、分页模板 _Pager.cshtml(View/Shared中) 5、View视图 6、CSS分页在右下角显示 7、Controller控制器中 8、单纯SQL语句分页当然你也可以用存储过程进行分页

    vue分页器组件编写方法详解

    使用vue编写的分页器组件,支持输入页码跳转,效果如图: 1、点击前五页: 2、点击中间部分页面 3、点击第一页,上一页按钮失效,点击最后一页,下一页按钮失效 组件调用: //html调用 参数:pageSize(总页数);...

    ASP.NET同步分页MvcPager使用详解

    以前我们写分页,后端会封装一Page类,现在我们可以用MvcPager给我们提供好的PageList,功能有点类似,不过MvcPager的功能要强大。 一、使用MvcPager这个控件,需要以下支持 1.后端MvcPager.dll引用: 2.前端需要Css...

    详解MVC如何使用开源分页插件(shenniu.pager.js)

    本文主要分享了shenniu.pager.js整个插件内容,不多且清晰。具有很好的参考价值,需要的朋友一起来看下吧

    50多个jQuery插件使用详解

    50多个jQuery插件使用详解: 1 JQuery Pager分页器 2 jQuery Spin Button自定义文本框数值自增或自减 3 FontSizer实现Javascript自定义动态调整网页文字大小 4 Magnify放大镜实现javascript图片放大功能 等等.....

Global site tag (gtag.js) - Google Analytics