js+bootstrap實現分頁、頁碼跳轉
阿新 • • 發佈：2018-12-04
製作page.jsp，在其他頁碼引入，只需把最外層的form標籤的id設定為myForm；
其中 totalPages:共有多少頁；totalElements：共有有多少條記錄；currentPage：第幾頁
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="${pageContext.request.contextPath}/。。。/bootstrap.css" rel="stylesheet" type="text/css"> <script src="${pageContext.request.contextPath}/。。。/jquery/1.11.1/jquery.js" type="text/javascript"></script> <script src="${pageContext.request.contextPath}/。。。/bootstrap.js" type="text/javascript"></script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>分頁頁面</title> <style type="text/css"> /*翻頁*/ .jump{ margin:0px 0; float: right; } .jump_text{ float:right; margin:0 0 0 5px; line-height:33px; } .jump_text input{ width:40px; border:rgba(212,212,212,1.00) 1px solid; height:30px; line-height:33px; background:#fff;} </style> <script type="text/javascript"> /* * 引用此頁面，只需在外面 */ function goPage(){ var jumpPage = document.getElementById("jumpPage").value; var totalPage = '${totalPages}'; if(isNaN(jumpPage)){ alert("請輸入數字!"); return; }else if(jumpPage.length==0){ alert("請輸入頁碼!"); }else if(jumpPage<=0 || Number(jumpPage)>Number(totalPage)){ alert("非法的頁碼【"+jumpPage+"】!"); document.getElementById("jumpPage").value=""; return; }else{ var flag = $("input[name='pageNumber']"); flag.remove(); $("#myForm").append("<input type='hidden' name='currentPage' value='"+jumpPage+"' />"); $("#myForm").submit(); } } function pageTo(pageNumber){ var jumpPage=1; if(pageNumber==-1){ var curpage='${pageNumber}'; jumpPage=Number(curpage)-1; }else if(pageNumber==-2){ var curpage='${pageNumber}'; jumpPage=Number(curpage)+1; }else{ jumpPage=Number(pageNumber); } var flag = $("input[name='pageNumber']"); flag.remove(); $("#myForm").append("<input type='hidden' name='currentPage' value='"+jumpPage+"' />"); $("#myForm").submit(); } </script> </head> <body> <!-- 分頁頁碼 --> <div style="height: 400px;"> </div> <hr> <nav> <ul class="pagination"> <!-- 上一頁 --> <!-- 噹噹前頁碼為1時，隱藏上一頁按鈕 --> <li <c:if test="${currentPage==1 }">class="disabled"</c:if>> <!-- 噹噹前頁碼不等於1時，跳轉到上一頁 --> <a <c:if test="${currentPage==1 }">href="javaScript:void(0)"</c:if> <c:if test="${currentPage!=1 }">href="javaScript:pageTo('${currentPage-1 }')"</c:if> >上一頁</a> </li> <!-- 頁碼 --> <!-- 當總頁數小於等於7時，顯示頁碼1...7頁 --> <c:if test="${totalPages<=7}"> <c:forEach begin="1" end="${totalPages}" var="i"> <li <c:if test="${currentPage==i }">class="active"</c:if>> <a href="javaScript:pageTo('${i}')">${i}</a> </li> </c:forEach> </c:if> <!-- 當總頁數大於7時 --> <c:if test="${totalPages>7}"> <!-- 當前頁數小於等於4時，顯示1到5...最後一頁 --> <c:if test="${currentPage<=4}"> <c:forEach begin="1" end="5" var="i"> <li <c:if test="${currentPage==i }">class="active"</c:if>> <a href="javaScript:pageTo('${i}')">${i}</a> </li> </c:forEach> <li><a href="#">...</a></li> <li <c:if test="${currentPage==totalPages }">class="active"</c:if>> <a href="javaScript:pageTo('${totalPages}')">${totalPages}</a> </li> </c:if> <!-- 當前頁數大於4時，如果當前頁小於總頁碼書-3，則顯示1...n-1,n,n+1...最後一頁 --> <c:if test="${currentPage>4}"> <c:if test="${currentPage<totalPages-3}"> <li><a href="javaScript:pageTo('${1}')">${1}</a> </li> <li><a href="#">...</a></li> <c:forEach begin="${currentPage-1 }" end="${currentPage+1 }" var="i"> <li <c:if test="${currentPage==i }">class="active"</c:if>> <a href="javaScript:pageTo('${i}')">${i}</a> </li> </c:forEach> <li><a href="#">...</a></li> <li <c:if test="${currentPage==totalPages }">class="active"</c:if>> <a href="javaScript:pageTo('${totalPages}')">${totalPages}</a> </li> </c:if> </c:if> <!-- 當前頁數大於4時，如果當前頁大於總頁碼書-4，則顯示1...最後一頁-3，最後一頁-2，最後一頁-1，最後一頁 --> <c:if test="${currentPage>totalPages-4}"> <li><a href="javaScript:pageTo('${1}')">${1}</a> </li> <li><a href="#">...</a></li> <c:forEach begin="${totalPages-3 }" end="${totalPages }" var="i"> <li <c:if test="${currentPage==i }">class="active"</c:if>> <a href="javaScript:pageTo('${i}')">${i}</a> </li> </c:forEach> </c:if> </c:if> <!-- 下一頁 --> <!-- 噹噹前頁碼為最後一頁或者最後一頁為0時，隱藏下一頁按鈕 噹噹前頁碼不等於總頁碼時，跳轉下一頁 --> <li <c:if test="${currentPage==totalPages || totalPages==0}">class="disabled"</c:if>> <a <c:if test="${currentPage==totalPages || totalPages==0 }">href="javaScript:void(0)"</c:if> <c:if test="${currentPage!=totalPages }">href="javaScript:pageTo('${currentPage+1 }')"</c:if>>下一頁</a> </li> </ul> <!-- 跳轉頁 --> <div class="jump"> <span class="jump_text">共有${totalPages }頁,${totalElements }條記錄,跳到 <input type="text" name="jumpPage" id="jumpPage" onkeyup="this.value=this.value.replace(/[^0-9-]+/,'');">頁 <button type="button" class="btn btn-primary btn-xs" onclick="goPage()">GO</button> </span> </div> </nav> <div style="clear: both;"></div> <hr> totalPages:共有多少頁；totalElements：共有有多少條記錄；currentPage：第幾頁 </body> </html>
展示：
