JSP+JSTL+EL表达式，实现web页面的页面跳转功能（上一页下一页首页末页页面跳转）

于 2020-12-03 15:51:48 发布
阅读量3.1k 收藏 14
点赞数
分类专栏： 早期编程语言基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42647903/article/details/110532595
版权

分页显示的功能实现：

一、分页显示无处不在

意义：

实际中不会将所有数据一起显示出来，加载费时，效率也低，所以需要考虑数据的分页显示

二、前期准备

（1）jar包

在这里插入图片描述
在这里插入图片描述

（2）头部标签
<%@ taglib prefix="C" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

三、具体实现分析

1. 实现：首页上一页

通过超链接，跳转到servlet，并且传递pageNo来实现
<c:if test="${requestScope.page.pageNo>1}">
	<a href="manager/bookServlet?action=page&pageNo=1">首页</a>
	<a href="manager/bookServlet?action=page&pageNo=${requestScope.page.pageNo-1}">上一页</a>
</c:if>

2. 实现：末页下一页

<c:if test="${requestScope.page.pageNo<requestScope.page.pageTotal}">
	<a href="manager/bookServlet?action=page&pageNo=${requestScope.page.pageNo+1}">下一页</a>
	<a href="manager/bookServlet?action=page&pageNo=${requestScope.page.pageTotal}">末页</a>
</c:if>

3.实现：输入页面跳转

 通过绑定单击事件，响应跳转servlet调用page方法并且传递pageNo实现
$("#inputbtn").click(function(){
	var pageNumber = $("#pn_input").val();
	location.href ="${pageScope.basePath}manager/bookServlet?action=page&pageNo="+pageNumber;
});

4. 实现：显示 1 2【3】4 5，多页面选项

|-- 如果总页码小于等于 5 的情况，页码的范围是：1-总页码

<c:when test="${requestScope.page.pageTotal<=5}">
	<%--循环输出这些页码--%>
	<c:forEach begin="1" end="${requestScope.page.pageTotal}" var="i">
		<%--如果是当前页面，则显示【当前页码】--%>
		<c:if test="${i == requestScope.page.pageNo}">
			【${i}】
		</c:if>
		
		<%--如果不是当前页码则直接显示数字，并加上超链接实现可以跳转的功能--%>
		<c:if test="${i != requestScope.page.pageNo}">
			<a href="manager/bookServlet?action=page&pageNo=${i}">${i}</a>
		</c:if>
	</c:forEach>
</c:when>
|-- 如果总页码大于5，那么就需要分情况讨论
   |-- 开始前3个，显示1-5
   |-- 最后3个页码，显示(Total-4)-Total
   |-- 之外，始终保持当前页码在中间，，显示（当前页码-2）-（当前页码+2）

<c:when test="${requestScope.page.pageTotal>5}">
	<c:choose>
		<%--页码在前三，显示1-5--%>
		<c:when test="${requestScope.page.pageNo<=3}">
			<c:forEach begin="1" end="5" var="i">
				<%--如果是当前页面，则显示【当前页码】--%>
				<c:if test="${i == requestScope.page.pageNo}">
					【${i}】
				</c:if>
				<%--如果不是当前页码则直接显示数字，并加上超链接实现可以跳转的功能--%>
				<c:if test="${i != requestScope.page.pageNo}">
					<a href="manager/bookServlet?action=page&pageNo=${i}">${i}</a>
				</c:if>
			</c:forEach>
		</c:when>

		<%--页码在后三，显示(Total-4)-Total--%>
		<c:when test="${requestScope.page.pageNo > requestScope.page.pageTotal-3}">
			<c:forEach begin="${requestScope.page.pageTotal-4}" end="${requestScope.page.pageTotal}" var="i">
				<%--如果是当前页面，则显示【当前页码】--%>
				<c:if test="${i == requestScope.page.pageNo}">
					【${i}】
				</c:if>
				<%--如果不是当前页码则直接显示数字，并加上超链接实现可以跳转的功能--%>
				<c:if test="${i != requestScope.page.pageNo}">
					<a href="manager/bookServlet?action=page&pageNo=${i}">${i}</a>
				</c:if>
			</c:forEach>

		</c:when>

		<%--其余其他情况，显示（当前页码-2）-（当前页码+2）--%>
		<c:otherwise>
			<c:forEach begin="${requestScope.page.pageNo-2}" end="${requestScope.page.pageNo+2}" var="i">
				<%--如果是当前页面，则显示【当前页码】--%>
				<c:if test="${i == requestScope.page.pageNo}">
					【${i}】
				</c:if>
				<%--如果不是当前页码则直接显示数字，并加上超链接实现可以跳转的功能--%>
				<c:if test="${i != requestScope.page.pageNo}">
					<a href="manager/bookServlet?action=page&pageNo=${i}">${i}</a>
				</c:if>
			</c:forEach>
		</c:otherwise>
	</c:choose>

</c:when>

 

四、总的分析

注意：这并不是完整的代码，只是分析的思路部分

|-- 分页显示的功能：实际中不会将所有数据一起显示出来，加载费时，效率也低，所以需要考虑分页显示
        分页内容：
        pageNo 需要知道当前页码
        pageTotal 需要计算总页码
        pageTotalCount 需要知道数据库中图书总记录数
        pageSize 需要设置每页显示数量
        Items  需要获取当前页图书数据

        javaBean:Page类

        DAO部分：BookDAO里面新增方法，新增测试
        查询总记录数
            public Integer queryTotalCount() {
                String sql = "SELECT COUNT(*) FROM t_book;";
                Number number = (Number) querySingleValue(sql);
                return number.intValue();
            }
        查询当前页面的图书数据
            public List<Book> queryPageItems(Integer begin,Integer pageSize) {
                String sql = "SELECT id,bookname,author,bookprice,sale,save,img_path FROM t_book LIMIT ?,?;";
                List<Book> books = queryList(Book.class, sql, begin,pageSize);
                return books;
            }

        2)分页模型 Page 的抽取（当前页数，总页数，总记录数，当前页数据，每页记录数）

            Service部分，新增page()方法
            方法体内调用DAO，得到数据库数据，将总记录数、总页码数、当前页面数据打包成page 对象
            这里稍微有点难理解，因为之前的Book都是直接调用DAO，就实现增删查改的操作。
            
            Servlet部分，新增page部分，获取用户交互页面的信息，调用service实现功能
            获取当前页码、页面显示数量pagesize
            传递显示数据

        4)首页、上一页、下一页、末页实现
            通过超链接，跳转到servlet，并且传递pageNo来实现
            <c:if test="${requestScope.page.pageNo>1}">
				<a href="manager/bookServlet?action=page&pageNo=1">首页</a>
				<a href="manager/bookServlet?action=page&pageNo=${requestScope.page.pageNo-1}">上一页</a>
            </c:if>
            
            <c:if test="${requestScope.page.pageNo<requestScope.page.pageTotal}">
				<a href="manager/bookServlet?action=page&pageNo=${requestScope.page.pageNo+1}">下一页</a>
				<a href="manager/bookServlet?action=page&pageNo=${requestScope.page.pageTotal}">末页</a>
			</c:if>

        5)分页模块中跳转到指定页数功能实现
            通过绑定单击事件，响应跳转servlet调用page方法并且传递pageNo实现
            $("#inputbtn").click(function(){
				var pageNumber = $("#pn_input").val();
				location.href ="${pageScope.basePath}manager/bookServlet?action=page&pageNo="+pageNumber;
			});

        6)分页模块中，页码 1,2,【3】,4,5 的显示，要显示 5 个页码，并且页码可以点击跳转
        
           如果总页码小于等于 5 的情况，页码的范围是：1-总页码
                <c:when test="${requestScope.page.pageTotal<=5}">
					<%--循环输出这些页码--%>
					<c:forEach begin="1" end="${requestScope.page.pageTotal}" var="i">
						<%--如果是当前页面，则显示【当前页码】--%>
						<c:if test="${i == requestScope.page.pageNo}">
							【${i}】
						</c:if>
						<%--如果不是当前页码则直接显示数字，并加上超链接实现可以跳转的功能--%>
						<c:if test="${i != requestScope.page.pageNo}">
							<a href="manager/bookServlet?action=page&pageNo=${i}">${i}</a>
						</c:if>
					</c:forEach>

				</c:when>

           如果总页码大于5，那么就需要分情况讨论
           
           |-- 开始前3个，显示1-5
           |-- 最后3个页码，显示(Total-4)-Total
           |-- 之外，始终保持当前页码在中间，，显示（当前页码-2）-（当前页码+2）
           
                <c:when test="${requestScope.page.pageTotal>5}">
					<c:choose>
						<%--页码在前三，显示1-5--%>
						<c:when test="${requestScope.page.pageNo<=3}">
							<c:forEach begin="1" end="5" var="i">
								<%--如果是当前页面，则显示【当前页码】--%>
								<c:if test="${i == requestScope.page.pageNo}">
									【${i}】
								</c:if>
								<%--如果不是当前页码则直接显示数字，并加上超链接实现可以跳转的功能--%>
								<c:if test="${i != requestScope.page.pageNo}">
									<a href="manager/bookServlet?action=page&pageNo=${i}">${i}</a>
								</c:if>
							</c:forEach>
						</c:when>

						<%--页码在后三，显示(Total-4)-Total--%>
						<c:when test="${requestScope.page.pageNo > requestScope.page.pageTotal-3}">
							<c:forEach begin="${requestScope.page.pageTotal-4}" end="${requestScope.page.pageTotal}" var="i">
								<%--如果是当前页面，则显示【当前页码】--%>
								<c:if test="${i == requestScope.page.pageNo}">
									【${i}】
								</c:if>
								<%--如果不是当前页码则直接显示数字，并加上超链接实现可以跳转的功能--%>
								<c:if test="${i != requestScope.page.pageNo}">
									<a href="manager/bookServlet?action=page&pageNo=${i}">${i}</a>
								</c:if>
							</c:forEach>

						</c:when>

						<%--其余其他情况，显示（当前页码-2）-（当前页码+2）--%>
						<c:otherwise>
							<c:forEach begin="${requestScope.page.pageNo-2}" end="${requestScope.page.pageNo+2}" var="i">
								<%--如果是当前页面，则显示【当前页码】--%>
								<c:if test="${i == requestScope.page.pageNo}">
									【${i}】
								</c:if>
								<%--如果不是当前页码则直接显示数字，并加上超链接实现可以跳转的功能--%>
								<c:if test="${i != requestScope.page.pageNo}">
									<a href="manager/bookServlet?action=page&pageNo=${i}">${i}</a>
								</c:if>
							</c:forEach>
						</c:otherwise>
					</c:choose>

				</c:when>
尚墨1111
关注
  • 0
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值