zoukankan      html  css  js  c++  java
  • 分页标签:pager-taglib使用指南

    一简介, 
    Pager-taglib,支持多种风格的分页显示。实际上她是一个Jsp标签库,为在JSP上显示分页信息而设计的一套标签,通过这些标签的不同的组合,会形成多种不一样的分页页面,风格各异,她自带的DEMO就有七种左右的分页风格,包括Google的分页风格。而需要订制自已的风格的分页页面也非常简单。 

    下面我先简单说一下长用到的标签的作用吧: 

    pg:pager【这个标签用来设置分页的总体参数】重要参数说明: 
    url:分页的链接根地址,pager标签会在这个链接的基础上附加分页参数 
    items:总记录数,pager标签正是根据这个值来计算分页参数的 
    maxPageItems:每页显示的行数,默认为10 
    maxIndexPages:在循环输出页码的时候,最大输出多少个页码,默认是10 
    
    pg:first【第一页的标签】重要参数说明: 
    export变量的意义: 
    pageUrl - 分页链接URL地址(最重要的export参数) 
    pageNumber - 页码 
    firstItem - 首页第一行的索引值 
    lastItem - 首页最后一行的索引值 
    
    pg:pre【上一页标签】重要参数说明: 
    export变量的意义: 
    pageUrl - 分页链接URL地址(最重要的export参数) 
    pageNumber - 页码 
    firstItem - 前页第一行的索引值 
    lastItem - 前页最后一行的索引值 
    
    pg:next【下一页标签】重要参数说明: 
    export变量的意义: 
    pageUrl - 分页链接URL地址(最重要的export参数) 
    pageNumber - 页码 
    firstItem - 下页第一行的索引值 
    lastItem - 下页最后一行的索引值 
    
    pg:last重要参数说明: 
    export变量的意义: 
    pageUrl - 分页链接URL地址(最重要的export参数) 
    pageNumber - 页码 
    firstItem - 尾页第一行的索引值 
    lastItem - 尾页最后一行的索引值 
    
    pg:pages【这个标签用来循环输出页码信息】重要参数说明: 
    export变量的意义: 
    pageUrl - 分页链接URL地址(最重要的export参数) 
    pageNumber - 页码 
    firstItem - pageNumber这个页码指定的那一页的第一行的索引值 
    lastItem - pageNumber这个页码指定的那一页的最后一行的索引值 

    分页方式有两种: 
    一种是从Action中得到一个List,在页面上通过<pg:item>进行自动分页。 
    第二种是通过把 pageSize,pageNo两参数传给后台进行数据库分页。 

    我做两个Demo加以说明对比: 

    二、准备 
    把pager-taglib.jar放到lib目录下(仅此足亦,完全没必要改web.xml什么的,还有官方war包中的东西都可以不要) 

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

    三,jsp (第一种分页方案由<pg:item>自行分页 )

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>   
    <%@ taglib uri="/WEB-INF/tld/c.tld" prefix="c"%>   
    <%@ taglib uri="http://jsptags.com/tags/navigation/pager" prefix="pg" %>   
    <html>   
    <head></head>   
    <body>   
    <pg:pager    
    url="/PageAction.do"    
    index="half-full"  
    maxPageItems = "3"    
        maxIndexPages="5"    
    isOffset = "<%=false%>"    
        export = "pageOffset,currentPageNumber=pageNumber"    
        scope = "request">   
           
     <table>     
        <c:forEach items="${userlist}" var="user">   
        <pg:item>   
         <tr>   
          <td height="39">${user.userId}</td>   
          <td height="39">${user.username}</td>   
          <td height="39">${user.password}</td>   
         </tr>        
        </pg:item>   
    </c:forEach>   
    </table>     
      <pg:index>   
        <center>   
        <table border=0 cellpadding=0 width=10% cellspacing=0>   
        <tr align=center valign=top>   
        <td valign=bottom><font face=arial,sans-serif   
          size=-1>Result Page: </font></td>   
        <pg:prev ifnull="true">   
          <% if (pageUrl != null) { %>   
            <td align=right><A HREF="<%= pageUrl %>"><IMG   
              SRC=http://www.google.com/nav_previous.gif alt="" border=0><br>   
            <b>Previous</b></A></td>   
          <% } else { %>   
            <td><IMG SRC=http://www.google.com/nav_first.gif alt="" border=0></td>   
          <% } %>   
        </pg:prev>   
        <pg:pages>   
          <% if (pageNumber == currentPageNumber) { %>   
            <td><IMG SRC=http://www.google.com/nav_current.gif alt=""><br>   
            <font color=#A90A08><%=pageNumber%></font></td>   
          <% } else { %>   
            <td><A HREF="<%=pageUrl%>"><IMG   
              SRC=http://www.google.com/nav_page.gif alt="" border=0><br>   
            <%= pageNumber %></A></td>   
          <% } %>   
        </pg:pages>   
        <pg:next ifnull="true">   
          <% if (pageUrl != null) { %>   
            <td><A HREF="<%=pageUrl%>"><IMG   
              SRC=http://www.google.com/nav_next.gif alt="" border=0><br>   
            <b>Next</b></A></td>   
          <% } else { %>   
            <td><IMG SRC=http://www.google.com/nav_last.gif alt="" border=0></td>   
          <% } %>   
        </pg:next>   
        </tr>   
        </table>   
        </center>   
      </pg:index>   
      </pg:pager>   
    </body></html>  
    

    四.标签讲解:从页面里可以看到,这里使用了几个标签 

    1、<pg:pager>,在这个标签库里就充当着一个领袖的作用,一切子标签都在它里面工作。就以上出现的参数进行解释一下: 
    items:数据的纪录数 
    maxPageItems:显示最多的纪录数/页 
    maxIndexPages:显示最多的分页数/次,如设为5的话,则会出现这样的情况 1 2 3 4 5 .或 3 4 5 6 7 这样的形式,其实她自带的DEMO都喜欢把页数展现出来排成一排。 
    isOffset:与pg:item配套使用 
    export:这个属性比较重要,文档也对此作好相对长篇幅的说明。这个属性是让标签给你暴露什么变量,当然这些变量是有选择的,如在Pager标签里,可以暴露出来的变量有pageOffset及pageNumber,即页码偏移量及页码。通过这两个变量名,可以在Jsp或Java里面从Request里获得。Export属性接受的值还有表达式,如currentPage=pageNumber表示,把pageNumber的值暴露出来,并赋给一个叫CurrentPage的变量,这个变量将被保存到Request中,在Jsp或Java中可以得到。 
    scope:咳。还需要讲么? 

    2、<pg:param>这个标签很有用,用来设置将要加入到URL的参数。使用Name属性指定即可。在这个Demo中我们还没有用的参数传递,下一个Demo你会看到它的用法。 

    3、<pg:index>这个标签说明分页条显示的内容,在这里你可以设置各种风格的分页显示方式,本例是google风格的分页条。 
    4,  <pg:prev> , <pg:pages>,<pg:next>这些标签都是导航标签顾名思义,你一看例子就明白了,我就不用讲了吧。 

    五,第二种分页方案 
    与页面自行分页不同的是还需要给后台传两个参数, 
    一个是pageNo(当前页数) 
    可以在每一个PageUrl后面都加了&pageNo=<%= pageNumber %>。让我们的URL带上页码的参数,这样程序可以拿到页码去查找所需要的数据,你可以去比较一下两Demo的代码。OK,另一个参数是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属性 
    六.以下是Demo代码 

    <pg:pager    
     items="${ totalRows }"  
     url="/PageAction.do"  
    index="half-full"  
     maxPageItems = "5"    
     maxIndexPages="10" isOffset = "<%=false%>"    
        export = "pageOffset,currentPageNumber=pageNumber"    
        scope = "request">   
     <pg:param name="pagesize"  value="5" />   
           
     <table align="center">     
    <c:forEach items="${userlist}" var="user">   
      <!--pg:item-->   
      <tr>   
          <td height="39">${user.userId}</td>   
          <td height="39">${user.username}</td>   
          <td height="39">${user.password}</td>   
         </tr>     
       <!--/pg:item-->   
    </c:forEach>   
    </table>    
     <pg:index>   
        <center>   
        <table border=0 cellpadding=0 width=10% cellspacing=0>   
        <tr align=center valign=top>   
        <td valign=bottom><font face=arial,sans-serif   
          size=-1>Result Page: </font></td>   
        <pg:prev ifnull="true">   
          <% if (pageUrl != null) { %>   
            <td align=right><A HREF="<%=pageUrl%>&pageNo=<%=pageNumber%>"><IMG   
              SRC=http://www.google.com/nav_previous.gif alt="" border=0><br>   
            <b>Previous</b></A></td>   
          <% } else { %>   
            <td><IMG SRC=http://www.google.com/nav_first.gif alt="" border=0></td>   
          <% } %>   
        </pg:prev>   
        <pg:pages>   
          <% if (pageNumber == currentPageNumber) { %>   
            <td><IMG SRC=http://www.google.com/nav_current.gif alt=""><br>   
            <font color=#A90A08><%= pageNumber %></font></td>   
          <% } else { %>   
            <td><A HREF="<%=pageUrl%>&pageNo=<%=pageNumber%>"><IMG   
              SRC=http://www.google.com/nav_page.gif alt="" border=0><br>   
            <%=pageNumber%></A></td>   
          <% } %>   
        </pg:pages>   
        <pg:next ifnull="true">   
          <% if (pageUrl != null) { %>   
            <td><A HREF="<%=pageUrl%>&pageNo=<%=pageNumber%>"><IMG   
              SRC=http://www.google.com/nav_next.gif alt="" border=0><br>   
            <b>Next</b></A></td>   
          <% } else { %>   
            <td><IMG SRC=http://www.google.com/nav_last.gif alt="" border=0></td>   
          <% } %>   
        </pg:next>   
        </tr>   
        </table>   
        </center>   
      </pg:index>   
      </pg:pager>  
    

    有了这些理论上的知识,我们现在一起来做一个demo: 
    1.建立一个类:(因为我们需要给pager-taglib两个参数,一个是记录总数INT,一个是要显示的数据LIST) 

    import java.util.List; 
    
    /** 
    * 分页模型 
    * @author WinLive 
    * 
    */ 
    public class PagerModel { 
    
    //总记录数 
    private int total; 
    
    //当前页的结果集 
    private List datas; 
    
    public List getDatas() { 
    return datas; 
    } 
    public void setDatas(List datas) { 
    this.datas = datas; 
    } 
    public int getTotal() { 
    return total; 
    } 
    public void setTotal(int total) { 
    this.total = total; 
    } 
    } 
    

    2.新建一个JSP,显示我们做的分页数据 

    <%@ taglib uri="http://jsptags.com/tags/navigation/pager" prefix="pg"%> 
    <%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %> 
    <%@ taglib prefix="fmt"  uri="http://java.sun.com/jsp/jstl/fmt" %> 
    
      <!-- 列表数据栏 --> 
    <c:if test="${!empty pm.datas}"> 
    <!-- 这里就是要显示的数据了 --> 
    </c:if> 
            <!-- 在列表数据为空的时候,要显示的提示信息 --> 
        <c:if test="${empty pm.datas}"> 
        <tr> 
        <td colspan="7" > 
        没有找到相应的记录 
        </td> 
        </tr> 
        </c:if>	
    
    <TABLE width="778" border=0 align=center cellPadding=0 cellSpacing=0 borderColor=#ffffff style="FONT-SIZE: 10pt"> 
            <TBODY> 
              <TR> 
                <TD height=28 align=center vAlign=center noWrap > 
                <!-- 可以在这里插入分页导航条 --> 
    <pg:pager url="index.jsp" items="${pm.total }" 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> 
       </TD> 
             </TR> 
           </TBODY> 
         </TABLE> 
    

      

  • 相关阅读:
    正经学C#_循环[do while,while,for]:[c#入门经典]
    Vs 控件错位 右侧资源管理器文件夹点击也不管用,显示异常
    asp.net core 获取当前请求的url
    在实体对象中访问导航属性里的属性值出现异常“There is already an open DataReader associated with this Command which must be
    用orchard core和asp.net core 3.0 快速搭建博客,解决iis 部署https无法登录后台问题
    System.Data.Entity.Core.EntityCommandExecution The data reader is incompatible with the specified
    初探Java设计模式3:行为型模式(策略,观察者等)
    MySQL教程77-CROSS JOIN 交叉连接
    MySQL教程76-HAVING 过滤分组
    MySQL教程75-使用GROUP BY分组查询
  • 原文地址:https://www.cnblogs.com/koal/p/4399266.html
Copyright © 2011-2022 走看看