制作page.jsp，在其他页码引入，只需把最外层的form标签的id设置为myForm；

其中　　totalPages:共有多少页；totalElements：共有有多少条记录；currentPage：第几页

  1.  <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.      pageEncoding="UTF-8"%>
  3.  <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
  4.  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  5.  <html>
  6.  <head>
  7.  <link href="${pageContext.request.contextPath}/。。。/bootstrap.css" rel="stylesheet" type="text/css">
  8.  <script src="${pageContext.request.contextPath}/。。。/jquery/1.11.1/jquery.js" type="text/javascript"></script>
  9.  <script src="${pageContext.request.contextPath}/。。。/bootstrap.js" type="text/javascript"></script>
  10.  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  11.  <title>分页页面</title>
  12.  <style type="text/css">
  13.  /*翻页*/
  14.  .jump{
  15.      margin:0px 0;
  16.      float: right;
  17.      }
  18.  .jump_text{
  19.      float:right;
  20.      margin:0 0 0 5px;
  21.      line-height:33px;
  22.      }
  23.  .jump_text input{
  24.      width:40px;
  25.      border:rgba(212,212,212,1.00) 1px solid;
  26.      height:30px;
  27.      line-height:33px;
  28.      background:#fff;}
  29.  </style>
  30.  <script type="text/javascript">
  31.  
  32.  /*
  33.   * 引用此页面，只需在外面
  34.   */
  35.  
  36.  function goPage(){
  37.      var jumpPage = document.getElementById("jumpPage").value;
  38.      var totalPage = '${totalPages}';
  39.      if(isNaN(jumpPage)){
  40.          alert("请输入数字!");
  41.          return;
  42.      }else if(jumpPage.length==0){
  43.          alert("请输入页码!");
  44.      }else if(jumpPage<=0 || Number(jumpPage)>Number(totalPage)){
  45.          alert("非法的页码【"+jumpPage+"】!");
  46.          document.getElementById("jumpPage").value="";
  47.          return;
  48.      }else{
  49.          var flag = $("input[name='pageNumber']");
  50.          flag.remove();
  51.          $("#myForm").append("<input type='hidden' name='currentPage' value='"+jumpPage+"' />");
  52.          $("#myForm").submit();
  53.      }
  54.  }
  55.  function pageTo(pageNumber){
  56.      var jumpPage=1;
  57.      if(pageNumber==-1){
  58.          var curpage='${pageNumber}';
  59.          jumpPage=Number(curpage)-1;
  60.      }else if(pageNumber==-2){
  61.          var curpage='${pageNumber}';
  62.          jumpPage=Number(curpage)+1;
  63.      }else{
  64.          jumpPage=Number(pageNumber);
  65.      }
  66.      var flag = $("input[name='pageNumber']");
  67.      flag.remove();
  68.      $("#myForm").append("<input type='hidden' name='currentPage' value='"+jumpPage+"' />");
  69.      $("#myForm").submit();
  70.  }
  71.  </script>
  72.  </head>
  73.  <body>
  74.  <!--  分页页码     -->
  75.                      <div style="height: 400px;">
  76.  
  77.                      </div>
  78.                      <hr>
  79.                      <nav>
  80.                          <ul class="pagination">
  81.  
  82.                              <!-- 上一页  -->
  83.                              <!-- 当当前页码为1时，隐藏上一页按钮  -->
  84.                              <li <c:if test="${currentPage==1 }">class="disabled"</c:if>>
  85.                              <!-- 当当前页码不等于1时，跳转到上一页  -->
  86.                                  <a
  87.                                  <c:if test="${currentPage==1 }">href="javaScript:void(0)"</c:if>
  88.                                  <c:if test="${currentPage!=1 }">href="javaScript:pageTo('${currentPage-1 }')"</c:if>
  89.                                  >上一页</a>
  90.                              </li>
  91.  
  92.                              <!-- 页码  -->
  93.                              <!-- 当总页数小于等于7时，显示页码1...7页 -->
  94.                              <c:if test="${totalPages<=7}">
  95.                                  <c:forEach begin="1" end="${totalPages}" var="i">
  96.                                      <li <c:if test="${currentPage==i }">class="active"</c:if>>
  97.                                          <a
  98.                                          href="javaScript:pageTo('${i}')">${i}</a>
  99.                                      </li>
  100.                                  </c:forEach>
  101.                              </c:if>
  102.                              <!-- 当总页数大于7时 -->
  103.                              <c:if test="${totalPages>7}">
  104.                                  <!-- 当前页数小于等于4时，显示1到5...最后一页 -->
  105.                                  <c:if test="${currentPage<=4}">
  106.                                      <c:forEach begin="1" end="5" var="i">
  107.                                          <li <c:if test="${currentPage==i }">class="active"</c:if>>
  108.                                              <a
  109.                                              href="javaScript:pageTo('${i}')">${i}</a>
  110.                                          </li>
  111.                                      </c:forEach>
  112.                                      <li><a href="#">...</a></li>
  113.                                      <li
  114.                                          <c:if test="${currentPage==totalPages }">class="active"</c:if>>
  115.                                          <a
  116.                                          href="javaScript:pageTo('${totalPages}')">${totalPages}</a>
  117.                                      </li>
  118.                                  </c:if>
  119.                                  <!-- 当前页数大于4时，如果当前页小于总页码书-3，则显示1...n-1,n,n+1...最后一页 -->
  120.                                  <c:if test="${currentPage>4}">
  121.                                      <c:if test="${currentPage<totalPages-3}">
  122.                                          <li><a
  123.                                              href="javaScript:pageTo('${1}')">${1}</a>
  124.                                          </li>
  125.                                          <li><a href="#">...</a></li>
  126.                                          <c:forEach begin="${currentPage-1 }" end="${currentPage+1 }"
  127.                                              var="i">
  128.                                              <li <c:if test="${currentPage==i }">class="active"</c:if>>
  129.                                                  <a
  130.                                                  href="javaScript:pageTo('${i}')">${i}</a>
  131.                                              </li>
  132.                                          </c:forEach>
  133.                                          <li><a href="#">...</a></li>
  134.                                          <li
  135.                                              <c:if test="${currentPage==totalPages }">class="active"</c:if>>
  136.                                              <a
  137.                                              href="javaScript:pageTo('${totalPages}')">${totalPages}</a>
  138.                                          </li>
  139.                                      </c:if>
  140.                                  </c:if>
  141.                                  <!-- 当前页数大于4时，如果当前页大于总页码书-4，则显示1...最后一页-3，最后一页-2，最后一页-1，最后一页 -->
  142.                                  <c:if test="${currentPage>totalPages-4}">
  143.                                      <li><a
  144.                                          href="javaScript:pageTo('${1}')">${1}</a>
  145.                                      </li>
  146.  
  147.                                      <li><a href="#">...</a></li>
  148.                                      <c:forEach begin="${totalPages-3 }"
  149.                                          end="${totalPages }" var="i">
  150.                                          <li <c:if test="${currentPage==i }">class="active"</c:if>>
  151.                                              <a
  152.                                              href="javaScript:pageTo('${i}')">${i}</a>
  153.                                          </li>
  154.                                      </c:forEach>
  155.                                  </c:if>
  156.                              </c:if>
  157.                              <!-- 下一页  -->
  158.                              <!-- 当当前页码为最后一页或者最后一页为0时，隐藏下一页按钮
  159.                                                 当当前页码不等于总页码时，跳转下一页  -->
  160.                              <li
  161.                                  <c:if test="${currentPage==totalPages || totalPages==0}">class="disabled"</c:if>>
  162.                                  <a
  163.                                  <c:if test="${currentPage==totalPages || totalPages==0 }">href="javaScript:void(0)"</c:if>
  164.                                  <c:if test="${currentPage!=totalPages }">href="javaScript:pageTo('${currentPage+1 }')"</c:if>>下一页</a>
  165.                              </li>
  166.                          </ul>
  167.  
  168.                          <!-- 跳转页 -->
  169.                          <div class="jump">
  170.                              <span class="jump_text">共有${totalPages }页,${totalElements }条记录,跳到
  171.                                  <input type="text" name="jumpPage"
  172.                                  id="jumpPage"
  173.                                  onkeyup="this.value=this.value.replace(/[^0-9-]+/,'');">页
  174.                                  <button type="button" class="btn btn-primary btn-xs"
  175.                                      onclick="goPage()">GO</button>
  176.                              </span>
  177.                          </div>
  178.                      </nav>
  179.  
  180.              <div style="clear: both;"></div>
  181.         <hr>
  182.         totalPages:共有多少页；totalElements：共有有多少条记录；currentPage：第几页
  183.  </body>
  184.  </html>

展示：

js+bootstrap实现分页页码的更多相关文章

  1. js实现前端分页页码管理

    用JS实现前端分页页码管理,可以很美观的区分页码显示(这也是参考大多数网站的分页页码展示),能够有很好的用户体验,这也是有业务需要就写了一下,还是新手,经验不足,欢迎指出批评! 首先先看效果图: 这是 ...

  2. 使用KnockoutJs+Bootstrap实现分页

    [后端人员耍前端系列]KnockoutJs篇:使用KnockoutJs+Bootstrap实现分页   一.引言 由于最近公司的系统需要改版,改版的新系统我打算使用KnockoutJs来制作Web前端 ...

  3. Bootstrap Paginator分页插件

    Bootstrap Paginator分页插件使用示例 最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页 ...

  4. datatable.js 服务端分页+fixColumns列固定

    前言 记得还是15年的时候,工作需要,独自写后台管理系统..记得那时候,最让我头疼的不是后台逻辑,而是数据的列表展示. 列很多的时候,页面显示问题;分页样式问题;表格样式问题;数据加载...很多细节的 ...

  5. bootstrap实现分页

    bootstrap分页功能 写前端都会面临的一个问题就是分页,如果是纯js分页也是可以的,只是可能代码量比较大,所以今天写一个关于用bootstrap框架分页的例子,希望以后可以帮助到一些对这方面比较 ...

  6. Bootstrap Paginator分页插件+ajax

    Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub  Bootstrap分页插件属性介绍: http://www.cnblogs. ...

  7. bootstrap table分页（前后端两种方式实现）

    bootstrap table分页的两种方式: 前端分页:一次性从数据库查询所有的数据,在前端进行分页(数据量小的时候或者逻辑处理不复杂的话可以使用前端分页) 服务器分页:每次只查询当前页面加载所需要 ...

  8. ThinkPHP 整合Bootstrap Ajax分页

    ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...

  9. Angular.js+Bootstrap实现手风琴菜单

    说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...

随机推荐

  1. flask_SQLALchemy之多表查询

    1. join 查询 假设这样一个业务场景,知道一个邮箱地址,要查询这个地址所属的用户,第一个办法是用连接多个 filter() 来查询. for u, a in session.query(User ...

  2. 了解Java基本数据类型的取值范围

    拿byte类型做栗子 一个字节是8位二进制数,然后最高位会用来作为符号位.正数计算机是存的原码,负数是存的补码. 也就说byte正数最大是0111 1111,转化为十进制是:127(这就是byte的上 ...

  3. JavaScript中关于页面URL地址的获取

    1 window.location.host; //返回url的主机部分,例如 www.xxx.com window.location.hostname; //返回url的主机名,例如 www.xxx ...

  4. Android精通之OrmLite数据库框架，Picasso框架，Okio框架，OKHttp框架

    版权声明:未经博主允许不得转载 OrmLite基础知识 什么是OrmLite框架,在我没用这个框架时,不知道它有多好,用了才知道很方便哦,为了提供开发效率,Android开发者需要懂得运行多种框架进行 ...

  5. ElasticSearch权威指南学习（映射和分析）

    概念 映射(mapping)机制用于进行字段类型确认,将每个字段匹配为一种确定的数据类型(string, number, booleans, date等).+ 分析(analysis)机制用于进行全文 ...

  6. IDEA Exception in thread "main" java.lang.ClassNotFoundException: com.streamax.servicecore.business.FileManageServApplication

    [参考文章]:intelij idea: Exception in thread "main" java.lang.ClassNotFoundException 1. 报错信息 2 ...

  7. SUDO:/ETC/SUDOERS 可被任何人写 解决方案

    问题一: sudo: /etc/sudoers is world writablesudo: no valid sudoers sources found, quittingsudo: unable ...

  8. oracle中查询用户表/索引/视图创建语句

    不多说,直接上干货 1.查询当前用户下表的创建语句 select dbms_metadata.get_ddl('TABLE','ux_future') from dual; 2.查询其他用户下表的创建 ...

  9. vue页面参数闪一下的问题

    解决方法: 直接在外层元素加上v-cloak <div id='app' v-cloak></div>

  10. Kafka项目实战－用户日志上报实时统计之分析与设计

    1.概述 本课程的视频教程地址:<Kafka实战项目之分析与设计>  本课程我通过一个用户实时上报日志案例作为基础,带着大家去分析Kafka这样一个项目的各个环节,从而对项目的整体设计做比 ...