制作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>
展示：
