zoukankan      html  css  js  c++  java
  • java web 前端页面的分页逻辑

     1 <div class="divBody">
     2 <div class="divContent">
     3     <!--上一页 -->
     4     <c:choose><!-- page是你通过查询出来当前页得所有的对象数据  pagenum是当前页  如果=1  那么(上一页)的没有连接的 显示出来 -->
     5         <c:when test="${page.pagenum eq 1 }">
     6             <span class="spanBtnDisabled">上一页</span>
     7         </c:when>
     8       <!-- 否则显示有链接的 上一页  那么连接传值就(当前页-1)就好了 -->
     9       <c:otherwise>
    10           <a href="你要访问的servlet或者action&pagenum=${pager.pagenum-1}" class="aBtn bold">上一页</a>
    11       </c:otherwise>
    12       </c:choose>
    13           
    14          
    15  <!-- 
    16      我们需要计算页码列表的开始和结束位置,即两个变量begin和end
    17      计算它们需要通过当前页!
    18                下面试一页面只显示6页为依据 当然你想显示多少就显示多少 可以自己设置
    19      1. 总页数不足6页-> begin=1, end=最大页
    20      2. 通过公式设置begin和end,begin=当前页pagenum-2,end=当前页pagrnum+3
    21      3. 如果begin<1,那么让begin=1,end=6  
    22      4. 如果end>最大页, 让begin=总页数-5, end=总页数
    23  
    24       总页数:page.pageCount
    25       当前页:page.pagenum
    26    -->
    27     <c:choose>
    28         <!-- 因为我们在页面上只显示6页的数据 如果总页数小于6也的话  -->
    29           <c:when test="${总页数 <= 6 }">
    30             <c:set var="begin" value="1"/><!-- 设置begin的值是1 -->
    31              <c:set var="end" value="总页数"/><!-- 设置end的值是总页数 -->
    32          </c:when>
    33     <!-- 否则做以下事情 -->
    34     <c:otherwise>
    35          <!-- 如果总页数大于6的话 在这里我们假设总页数为7页 那么页面显示为1 2 3 4 5 6 ... 
    36             我们来说一下几种发生的情况 
    37          1.当前页 如果是第3页得话 bengin就是3-2=1 end就是3+3=6 那么页面显示就是 1 2 3 4 5 6 ...
    38          2.当前页 如果是第4页得话  begin就是4-2=2 end就是4+3=7 那么页面显示就是 2 3 4 5 6 7 没有省略号了 1和...消失
    39          3.当前页 如果是第5,6,7页得话  begin就是5-2=3 6-2=4 7-2=5 end就是5+3=8 6+3=9 7+3=10 但是最大页是7没有到8 9 10 就会出下以下判断  页面显示  2 3 4 5 6 7
    40          4.当前页 如果是第1,2页得话  begin就是1-2=-1 和2-2=0  end就是1+3=4 2+3=5  但是开始页begin必须是1 满足不了情况 就会出下以下判断 页面显示 1 2 3 4 5 6 ...
    41           -->
    42          <c:set var="begin" value="${当前页-2 }"/>
    43         <c:set var="end" value="${当前页 + 3}"/>
    44          <!-- 如果begin是-1和0的话 小于1  那么就设置开始页begin为1  结束页end为6 页面显示1 2 3 4 5 6 ... -->
    45         <c:if test="${begin < 1 }">
    46             <c:set var="begin" value="1"/>
    47             <c:set var="end" value="6"/>
    48           </c:if>
    49          <!-- 如果结束end页 大于了总页数  也就是上面的第三种情况 end结束页为8 9 10的话超过总页数7 那么设置开始bengin为 当前页就是总页数7-5=2 -->
    50          <!-- 结束就是总页数 页面显示为 2 3 4 5 6 7  -->
    51          <c:if test="${end > 总页数 }">
    52             <c:set var="begin" value="${总页数-5 }"/>
    53             <c:set var="end" value="${总页数 }"/>
    54          </c:if>         
    55       </c:otherwise>
    56   </c:choose>
    57   
    58   <!-- 获取到begin和end的值循环 -->
    59   <c:forEach begin="${begin }" end="${end }" var="i">
    60     <c:choose>
    61           <c:when test="${i eq 当前页 }">
    62             <span class="spanBtnSelect">${i }</span><!-- 如果i等于当前页  那就不给链接 -->
    63           </c:when>
    64           <c:otherwise>
    65             <a href="${你访问的action或者servlet }&pc=${i}" class="aBtn">${i }</a><!-- 否则就给链接 -->
    66           </c:otherwise>
    67     </c:choose>
    68   </c:forEach>
    69 
    70      <!-- 计算begin和end -->
    71        <!-- 如果总页数<=6,那么显示所有页码,即begin=1 end=${总页数} -->
    72         <!-- 设置begin=当前页码-2,end=当前页码+3 -->
    73           <!-- 如果begin<1,那么让begin=1 end=6 -->
    74            <!-- 如果end>最大页,那么begin=最大页-5 end=最大页 -->
    75 
    76 
    77      <!-- 如果结束页小于总页数7 那么显示... -->
    78      <!-- 显示点点点 --->
    79      <c:if test="${end < 总页数 }">
    80            <span class="spanApostrophe">...</span>
    81      </c:if> 
    82      
    83      <!--下一页 -->
    84      <c:choose>
    85          <c:when test="${当前页 eq 总页数 }"><span class="spanBtnDisabled">下一页</span></c:when>
    86          <c:otherwise><a href="${你要访问的action和servlet }&pagenum=${当前页+1}" class="aBtn bold">下一页</a></c:otherwise>
    87      </c:choose>
    88      
    89     <!-- 共N页 到M页 -->
    90      <span>共${page.pageCount }页</span>
    91      <span></span>
    92      <input type="text" class="inputPageCode" id="pageCode" value="${当前页 }"/>
    93      <span></span>
    94      <a href="javascript:_go();" class="aSubmit">确定</a>
    95 </div>
    96  </div>
  • 相关阅读:
    Linux下Mysql的安装步骤
    分布式集群Session原理及实现共享
    MySQL数据库表分区功能详解
    PHP面向对象程序设计之接口(interface)
    PHP面向对象程序设计之抽象类和抽象方法
    MySQL优化技巧
    MySQL性能优化之max_connections参数
    PHP环境下Memcache的使用方法
    PHP之Trait详解
    如何选择合适的MySQL数据类型
  • 原文地址:https://www.cnblogs.com/wenjie123/p/4596971.html
Copyright © 2011-2022 走看看