在上篇文章中，我們已經完成了分頁顯示的后台處理，現在進行前端的處理。
期望顯示結果：
由於對於不同的項目、不同的數據庫數據部分不同，所以我們將分頁部分提取出來，單獨建立jsp頁面：
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 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 8 <title>Insert title here</title> 9 </head> 10 <body> 11 <div id="page_nav" align="center"> 12 <a href="${page.path}?pageNo=1">首頁</a> 13 <a href="${page.path}?pageNo=${page.pageNumber -1}">上一頁</a> 14 <c:choose> 15 <c:when test="${page.totalPage<=5}"> 16 <c:set var="begin" value="1"></c:set> 17 <c:set var="end" value="${page.totalPage}"></c:set> 18 </c:when> 19 <c:when test="${page.pageNumber<=3}"> 20 <c:set var="begin" value="1"></c:set> 21 <c:set var="end" value="5"></c:set> 22 </c:when> 23 24 <c:otherwise> 25 <c:set var="begin" value="${page.pageNumber-2}"></c:set> 26 <c:set var="end" value="${page.pageNumber+2}"></c:set> 27 28 <c:if test="${end>page.totalPage}"> 29 <c:set var="begin" value="${page.pageNumber-4}"></c:set> 30 <c:set var="end" value="${page.totalPage}"></c:set> 31 </c:if> 32 </c:otherwise> 33 </c:choose> 34 35 <c:forEach begin="${begin}" end="${end}" var="num"> 36 <c:if test="${page.pageNumber== num}"> 37 <a href="${page.path}?pageNo=${num}">【${num}】</a> 38 </c:if> 39 <c:if test="${page.pageNumber!= num}"> 40 <a href="${page.path}?pageNo=${num}">${num}</a> 41 </c:if> 42 </c:forEach> 43 <a href="${page.path}?pageNo=${page.pageNumber +1}">下一頁</a> 44 <a href="${page.path}?pageNo=${page.totalPage}">末頁</a> 45 共${page.totalPage}頁，${page.totalRecord }條記錄 到第<input value="${page.totalPage}" name = "pn" id ="pn_input"/>頁 46 <input type="button" value="確定" id="btn_id"/> 47 <script type="text/javascript"> 48 $("#btn_id").click(function(){ 49 var value= $("#pn_input").val(); 50 window.location="${page.path}?pageNo="+value; 51 }) 52 </script> 53 </div> 54 </body> 55 </html>
以上代碼實現了跳轉頁面的功能，自動顯示5個頁面，並在當前頁面>=3並且<=總頁面數時居中顯示，如下圖的"【4】"：
最后在數據查詢顯示頁面的jsp中包含paging頁面即可。
1 <!-- 分頁信息 --> 2 <%@include file="/WEB-INF/view/paging.jsp" %>