你的位置:首页 > 软件开发 > 网页设计 > js+bootstrap实现分页页码

js+bootstrap实现分页页码

发布时间:2017-04-27 00:00:26
制作page.jsp,在其他页码引入,只需把最外层的form标签的id设置为myForm;其中  totalPages:共有多少页;totalElements:共有有多少条记录;currentPage:第几页 1 <%@ page language="java&q ...

js+bootstrap实现分页页码

制作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='/images/loading.gif' data-original="${pageContext.request.contextPath}/。。。/jquery/1.11.1/jquery.js" type="text/javascript"></script> 9 <script src='/images/loading.gif' data-original="${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 }"></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 }"></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 }"></c:if>>108                       <a109                       href="javaScript:pageTo('${i}')">${i}</a>110                     </li>111                   </c:forEach>112                   <li><a href="#">...</a></li>113                   <li114                     <c:if test="${currentPage==totalPages }"></c:if>>115                     <a116                     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><a123                       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 }"></c:if>>129                         <a130                         href="javaScript:pageTo('${i}')">${i}</a>131                       </li>132                     </c:forEach>133                     <li><a href="#">...</a></li>134                     <li135                       <c:if test="${currentPage==totalPages }"></c:if>>136                       <a137                       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><a144                     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 }"></c:if>>151                       <a152                       href="javaScript:pageTo('${i}')">${i}</a>153                     </li>154                   </c:forEach>155                 </c:if>156               </c:if>157               <!-- 下一页 -->158               <!-- 当当前页码为最后一页或者最后一页为0时,隐藏下一页按钮159                         当当前页码不等于总页码时,跳转下一页 -->160               <li161                 <c:if test="${currentPage==totalPages || totalPages==0}"></c:if>>162                 <a163                 <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实现分页页码

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。