zoukankan      html  css  js  c++  java
  • 分页技术框架(Pager-taglib)学习一(页面分页)

    一、Pager-taglib简介
        1、Pager-taglib,支持多种风格的分页显示。实际上她是一个Jsp标签库,为在JSP上显示分页信息而设计的一套标签,通过这些标签的不同的组合,会形成多种不一样的分页页面,风格各异,她自带的DEMO就有八种左右的分页风格(在pager-taglib-2.0.war包下的WEB-INFjsp 中),包括Google的分页风格。而需要订制自已的风格的分页页面也非常简单。
       2、分页方式有两种:
        一种是:页面分页,即从Action或者其他控制器中得到一个List,在页面上 通过<pg:item>进行自动分页。适合查询结果不大的情况。
        第二种是:数据库分页,即通过把 pageSize,pageNo两参数传给后台进行数据库分页。 适合大量查询。

       二、Pager-taglib标签详解
       1、<pg:pager>标签分页时我们重点设置的就是这个标签):这个标签用来设置分页的总体参数,重要参数说明:
         url:分页的链接根地址,pager标签会在这个链接上附加分页参数pager.offset,后台可根据这个参数分页, 也可自行在URL上添加参数。

        items:总记录数,pager标签正是根据这个值来计算分页参数的。在页面分页时,此参数可以不写,后台会自动计算出分页参数。如果你写的话将以你写的为准

        maxPageItems:每页显示的行数,也即每页显示的记录数,默认为10。 不写此标签,你会发现分页的条数在小于10的时候显示不出来一些数据。当大于10的时候则会出现重复的记录! 如:maxPageItems = "4"

        maxIndexPages:在循环输出页码的时候,最大输出多少个页码(也就是最多显示多少个页码),默认是10.如:maxIndexPages="3"

         export:这个属性比较重要,这个属性是让标签给你暴露什么变量,当然这些变量是有选择的,如在Pager标签里,可以暴露出来的变量有 pageOffset及pageNumber,即页码偏移量及页码通过这两个变量名,可以在Jsp或servlet(或者Action)里面从Request里获得。Export属性接受的值还有表达式,
    如currentPage=pageNumber表示,把pageNumber的值暴露出来,并赋给一个叫CurrentPage(自定义的)的变量,这个变量将被保存到Request中,在Jsp或servlet中可以得到
    通常设为:export="pageOffset,currentPageNumber=pageNumber".这里使用currentPageNumber=pageNumber的原因是pg:pages(不是page)标签输出用于存放每次循环的页码号的变量也叫pageNumber。
       
         scope:将export暴漏出变量,设置器存储范围。取值为:request、session等。默认保存在request范围内。

         isOffset:是否允许页面偏移。取值为true、false。如果为true的话,点击页码分页时,分页中的内容是不会有变化的,并且页码可以一直向后延伸(不论是否已到达你的尾页);设为false的话会正常分页。默认false。
        index:设置索引页的动态显示方式。取值为:center(默认)、forward、half-full。具体效果自己设置查看。
        
     
    说明:当我们选择不同的页号,会动态的出现其他页号,我们称之为二级分页。适用于查询结果较多,分页页数也比较多的情况,这时我们有必要对分页页号再进行分页显示。此时我们可以通过设置maxIndexPagesindex两个属性来实现二级分页。
       2、<pg:param>:
       
    这个标签很有用,用来设置将要加入到URL的参数,将传入后台。使用Name属性指定即可。
       3、<pg:item>:
         表示一页中的一项,pager标签库可根据这个项的个数来计算分页参数(pageOffset),通常放在jstl循环中
       4、<pg:index>:
        这个标签说明分页条显示的内容,它可以包含下面这些标记。

       5、<pg:first>:
       【第一页的标签】重要参数说明:
    export变量的意义:
    pageUrl - 分页链接URL地址(最重要的export参数,即框架暴漏出的参数
    pageNumber - 页码
    firstItem - 首页第一条记录的索引值
    lastItem - 首页最后一条记录的索引值

       6、<pg:prev>:
       【上一页标签】重要参数说明:
    export变量的意义:
    pageUrl - 分页链接URL地址(最重要的export参数,即框架暴漏出的参数
    pageNumber - 页码

        7、<pg:next>
        【下一页标签】重要参数说明:
    export变量的意义:
    pageUrl - 分页链接URL地址(最重要的export参数,即框架暴漏出的参数
    pageNumber - 页码

        8、<pg:last>重要参数说明:
    export变量的意义:
    pageUrl - 分页链接URL地址(最重要的export参数,即框架暴漏出的参数
    pageNumber - 页码

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

      三、页面分页pager-taglib标签的基本结构
     
    分页技术框架(Pager-taglib)学习一(页面分页)
      注意:<pg:index>标签主要是分页导航的风格,我们可以自定义(如下面示例中的两个风格,其实也是改编自war包中八种风格的jsp文件),也可以使用在pager-taglib-2.0.war包下的WEB-INFjsp 八种风格的jsp文件,即使用静态导入或者动态导入的方式。如
         <pg:index>
          <%@ include file="/WEB-INF/jsp/google.jsp"%>
         </pg:index>
     

         <pg:index>
         <jsp:include page="/WEB-INF/jsp/pager_conn.jsp" flush="true"></jsp:include>
         </pg:index>

      静态导入前提:两页面合并后一定要能正确编译(即合并后一定要有6中的两个jsp页面指令,合并前这两个指令分散在哪个页面无所谓)
      动态导入前提:要包含的风格文件能够独立编译(即一定要导入5中的两个jsp页面指令)
     值得注意的是八种风格的jsp文件必须拷到
    /WEB-INF/jsp/目录下,并且每个jsp文件中的jsp动作指令标签(如<jsp:useBean >) 要删除。

      呵呵,有了这些,我们分页的重点就是设置pg:pager标签的总体属性啦

      四、Pager-taglib页面分页示例
        1、导入pager-taglib.jar到类路径下
        到官网http://jsptags.com/tags/navigation/pager/index.jsp下载pager-taglib-2.0.war。
    在pager-taglib-2.0.war包下的WEB-INFjsp 中包含了此框架默认的8中分页风格。
       2、新建实体类Book.java
        package entity;
    public class Book
    {
        private String name;
        private float price;
        public Book()
        {
            // TODO Auto-generated constructor stub
        }
        public Book(String name,float price)
        {
            this.setName(name);
            this.setPrice(price);
        }
        public String getName()
        {
            return name;
        }
        public void setName(String name)
        {
            this.name = name;
        }
        public float getPrice()
        {
            return price;
        }
        public void setPrice(float price)
        {
            this.price = price;
        }
    }
     3、新建控制器PagerServlet.java
       public class PagerServlet extends HttpServlet
    {
        public void doGet(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException
        {

            doPost(request, response);
        }
       
        public void doPost(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException
        {

            response.setContentType("text/html; charset=utf-8");
            PrintWriter out = response.getWriter();
            List<Book> books=null;
            if(books==null)
            {
             books = new ArrayList<Book>();
            Book b1 = new Book("物理1", 15);
            Book b2 = new Book("物理10", 10);
            Book b3 = new Book("物理9", 20);
            Book b4 = new Book("物理8", 30);
            Book b5 = new Book("物理7", 40);
            Book b6 = new Book("物理6", 50);
            Book b7 = new Book("物理5", 60);
            Book b8 = new Book("物理4", 70);
            Book b9= new Book("物理3", 80);
            Book b10 = new Book("物理2", 90);
            books.add(b10);
            books.add(b9);
            books.add(b8);
            books.add(b7);
            books.add(b6);
            books.add(b5);
            books.add(b4);
            books.add(b3);
            books.add(b2);
            books.add(b1);
            request.getSession().setAttribute("books", books);
            }
            //页面翻页的普通样式
            request.getRequestDispatcher("/book_list_comm.jsp").forward(request, response);
            //谷歌样式的页面翻页
            //request.getRequestDispatcher("/book_list_google.jsp").forward(request, response);
            out.flush();
            out.close();
        }
    }
     3、在web.xml中配置PagerServlet.java

       <servlet>
        <description>分页控制器</description>
        <servlet-name>PagerServlet</servlet-name>
        <servlet-class>servlet.PagerServlet</servlet-class>
      </servlet>
      <servlet-mapping>
        <servlet-name>PagerServlet</servlet-name>
        <url-pattern>/PagerServlet</url-pattern>
      </servlet-mapping>
    4、新建普通风格分页页面(核心部分)book_list_comm.jsp最重要
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@taglib uri="http://jsptags.com/tags/navigation/pager" prefix="pg" %>
     
     body元素中添加:
     <pg:pager url="book_list_comm.jsp" maxPageItems = "3" maxIndexPages="3" export="offset,currentPageNumber=pageNumber" isOffset="false"  index="half-full"  >  
         <table width="778" border="0" cellPadding="0" cellSpacing="1" bgcolor="#6386d6">  
            <tr bgcolor="#EFF3F7">  
              <TD align="center">书名</TD>  
              <TD align="center">价格</TD>  
                 
            </tr>  
            <c:if test="${!empty books}">  
              <c:forEach items="${books}" var="book">
              <pg:item>
                <tr bgcolor="#EFF3F7">  
                  <td align="center">${book.name }</td>  
                  <td align="center">${book.price }</td>  
                </tr> 
                </pg:item>  
              </c:forEach>  
              </c:if>  
                <c:if test="${empty books}">  
             <tr>  
                <td colspan="5" align="center" bgcolor="#EFF3F7">  
                没有找到相应的记录  
                </td>  
             </tr>  
             </c:if>  
            </table>

      <%-- 定义分页风格:普通风格 --%> 
      <pg:index>
      <pg:first>  
        <a href="${pageUrl}">首页</a>  
      </pg:first>  
      <pg:prev>  
        <a href="${pageUrl }">上一页</a>  
      </pg:prev>  
      <pg:pages>  
        <c:choose>
             <%--当循环页码是当前页码,则该页码不可以导航,并显示为红色--%>
          <c:when test="${currentPageNumber eq pageNumber}">  
            <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:index>  
    </pg:pager>  
      5、新建谷歌风格的分页界面(核心部分):book_list_google.jsp(最重要
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@taglib uri="http://jsptags.com/tags/navigation/pager" prefix="pg" %>

    <pg:pager url="book_list_google.jsp"  index="half-full" export="currentPageNumber=pageNumber" maxPageItems="3" maxIndexPages="3">

        
          <table width="778" border="0" cellPadding="0" cellSpacing="1" bgcolor="#6386d6">  
            <tr bgcolor="#EFF3F7">  
              <TD align="center">书名</TD>  
              <TD align="center">价格</TD>  
                 
            </tr>  
            <c:if test="${!empty books}">  
              <c:forEach items="${books}" var="book">
              <pg:item>
                <tr bgcolor="#EFF3F7">  
                  <td align="center">${book.name }</td>  
                  <td align="center">${book.price }</td>  
                </tr> 
                </pg:item>  
              </c:forEach>  
              </c:if>  
                <c:if test="${empty books}">  
             <tr>  
                <td colspan="5" align="center" bgcolor="#EFF3F7">  
                没有找到相应的记录  
                </td>  
             </tr>  
             </c:if>  
            </table>
          
           <%--定义风衣风格:谷歌风格 --%>
          <%--  使用静态导入谷歌风格 (如不理解,请参考标题三)
                 <pg:index>
                 <%@ include file="/WEB-INF/jsp/google.jsp"%>
                 </pg:index>
             --%> 
        
        <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>

    在浏览器中输入:http://localhost:8888/Pager-taglib/PagerServlet
    可以看到两种分页风格的的分页:
    普通风格:
    分页技术框架(Pager-taglib)学习一(页面分页)
    谷歌风格:

    分页技术框架(Pager-taglib)学习一(页面分页)

  • 相关阅读:
    反射 Reflection
    后台输出的数据进行字符判断,小数点后边是0不显示,不是0显示
    判断input内的字符是不是数字或字母
    手机端底部按钮隐藏与显示
    CSS改变checkbox样式
    js小数取整 小数保留两位
    如何判断打开页面时使用的设备?
    H5 拖放实例
    根据手机系统引入不同的css文件
    HTML 5 video 视频标签全属性详解(转)
  • 原文地址:https://www.cnblogs.com/kabi/p/5182856.html
Copyright © 2011-2022 走看看