在上篇文章中，我们已经完成了分页显示的后台处理，现在进行前端的处理。
期望显示结果：
由于对于不同的项目、不同的数据库数据部分不同，所以我们将分页部分提取出来，单独建立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" %>
时间： 2025-01-05 22:58:50