js+bootstrap实现分页页码

2018-06-24 01:14:35来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

制作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>

 

展示:

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:html标签必备

下一篇:表格,表单(练习)