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="${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>
展示：
