zoukankan      html  css  js  c++  java
  • Goods:分页显示页面导航条的实现

    pager.jsp

     1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
     2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
     3 <script type="text/javascript">
     4     function _go() {
     5         var pc = $("#pageCode").val();//获取文本框中的当前页码
     6         if(!/^[1-9]d*$/.test(pc)) {//对当前页码进行整数校验
     7             alert('请输入正确的页码!');
     8             return;
     9         }
    10         if(pc > ${pb.tp}) {//判断当前页码是否大于最大页
    11             alert('请输入正确的页码!');
    12             return;
    13         }
    14         location = "${pb.url}&pc=" + pc;
    15     }
    16 </script>
    17 
    18 
    19 <div class="divBody">
    20   <div class="divContent">
    21     <%--上一页 --%>
    22 <c:choose>
    23     <c:when test="${pb.pc eq 1 }"><span class="spanBtnDisabled">上一页</span></c:when>
    24     <c:otherwise><a href="${pb.url }&pc=${pb.pc-1}" class="aBtn bold">上一页</a></c:otherwise>
    25 </c:choose>
    26         
    27         
    28 
    29 <%--我们需要计算页码列表的开始和结束位置,即两个变量begin和end
    30 计算它们需要通过当前页码!
    31 1. 总页数不足6页--> begin=1, end=最大页
    32 2. 通过公式设置begin和end,begin=当前页-1end=当前页+3
    33 3. 如果begin<1,那么让begin=1end=6
    34 4. 如果end>tp, 让begin=tp-5, end=tp
    35  --%>
    36  <c:choose>
    37 
    38      <c:when test="${pb.tp <= 6 }">
    39          <c:set var="begin" value="1"/>
    40          <c:set var="end" value="${pb.tp }"/>
    41      </c:when>
    42      <c:otherwise>
    43          <c:set var="begin" value="${pb.pc-2 }"/>
    44          <c:set var="end" value="${pb.pc + 3}"/>
    45          <c:if test="${begin < 1 }">
    46            <c:set var="begin" value="1"/>
    47            <c:set var="end" value="6"/>
    48          </c:if>
    49          <c:if test="${end > pb.tp }">
    50            <c:set var="begin" value="${pb.tp-5 }"/>
    51            <c:set var="end" value="${pb.tp }"/>
    52          </c:if>         
    53      </c:otherwise>
    54  </c:choose>
    55  
    56  <c:forEach begin="${begin }" end="${end }" var="i">
    57    <c:choose>
    58          <c:when test="${i eq pb.pc }">
    59            <span class="spanBtnSelect">${i }</span>
    60          </c:when>
    61          <c:otherwise>
    62            <a href="${pb.url }&pc=${i}" class="aBtn">${i }</a>
    63          </c:otherwise>
    64    </c:choose>
    65            
    66               
    67  </c:forEach>
    68     <%-- 计算begin和end --%>
    69       <%-- 如果总页数<=6,那么显示所有页码,即begin=1 end=${pb.tp} --%>
    70         <%-- 设置begin=当前页码-2end=当前页码+3 --%>
    71           <%-- 如果begin<1,那么让begin=1 end=6 --%>
    72           <%-- 如果end>最大页,那么begin=最大页-5 end=最大页 --%>
    73 
    74 
    75     
    76     <%-- 显示点点点 --%>
    77     <c:if test="${end < pb.tp }">
    78       <span class="spanApostrophe">...</span>
    79     </c:if> 
    80 
    81     
    82      <%--下一页 --%>
    83 <c:choose>
    84     <c:when test="${pb.pc eq pb.tp }"><span class="spanBtnDisabled">下一页</span></c:when>
    85     <c:otherwise><a href="${pb.url }&pc=${pb.pc+1}" class="aBtn bold">下一页</a></c:otherwise>
    86 </c:choose>
    87         
    88         
    89     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    90     
    91     <%-- 共N页 到M页 --%>
    92     <span>共${pb.tp }页</span>
    93     <span></span>
    94     <input type="text" class="inputPageCode" id="pageCode" value="${pb.pc }"/>
    95     <span></span>
    96     <a href="javascript:_go();" class="aSubmit">确定</a>
    97   </div>
    98 </div>


    bug:刚开始列表无法显示 原来是${pb.tp}得到值为0  原来是BookDao中获取总记录数的这一行出问题了

    1 List<Object> params=new ArrayList<Object>(); //它是对应问号的值
    2 String sql="select count(*) from t_book"+whereSql;
    3 Number number=(Number) qr.query(sql, new ScalarHandler(),params.toArray());

    params没有toArray

  • 相关阅读:
    MongoDb 快速入门教程
    读书应该是件快乐的事
    图灵机 快速入门教程
    开源项目 —— 中国行政区划数据
    MySQL用户管理:添加用户、授权、删除用户
    Java 图片处理解决方案:ImageMagick 快速入门教程
    FTP弱口令猜解【python脚本】
    Telnet弱口令猜解【Python脚本】
    PHPMyAdmin弱口令猜解【Python脚本】
    WebLogic口令猜解工具【Python脚本】
  • 原文地址:https://www.cnblogs.com/xiaoying1245970347/p/4783288.html
Copyright © 2011-2022 走看看