学习博客：javaweb分页功能的实现---优化分页功能

最新推荐文章于 2024-05-21 00:59:56 发布

年轻的猴

最新推荐文章于 2024-05-21 00:59:56 发布

阅读量299

点赞数

文章标签： jsp

本文链接：https://blog.csdn.net/qq_42388853/article/details/108143498

版权

6)分页模块中，页码1,2, [3] ,4,5的显示，要显示5个页
码，并且页码可以点击跳转。
需求:显示5个连续的页码，而且当前页码在中间。除了当前页码之外，每个页码都可以点击跳到指定页。

情况1:如果总页码小于等于5的情况
情况2:总页码大于5的情况。假设一共10页
小情况1:当前页码为前面3个: 1, 2, 3的情况
小情况2:当前页码为最后3个，8, 9, 10
小情况3: 4，5, 6, 7,

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图书管理</title>
	<%@include file="/pages/common/head.jsp"%>
	<script type="text/javascript">
		 $(function () {
			$("a.deleteClass").click(function () {
				var src=$(this).parent().parent().find("td:first").text();
			 return confirm("你确定要删除【"+ src +"】吗?");

			});
		 	$("#searchPageBtn").click(function () {
				var pageNo=$("#pn_input").val();
				var pageTotal=${requestScope.page.pageTotal};
				if (pageNo<=pageTotal&&pageNo>0){
				location.href="${requestScope.basePath}manager/bookServlet?action=page&pageNo="+pageNo;
				}
				else{
				alert("输入有误，请重新输入");
				}
				});
		 });
	</script>
</head>
<body>
	
	<div id="header">
			<img class="logo_img" alt="" src="../../static/img/logo.gif" >
			<span class="wel_word">图书管理系统</span>
		<%@include file="/pages/common/manager_menu.jsp"%>
	</div>
	
	<div id="main">
		<table>
			<tr>
				<td>名称</td>
				<td>价格</td>
				<td>作者</td>
				<td>销量</td>
				<td>库存</td>
				<td colspan="2">操作</td>
			</tr>		
		 	<c:forEach items="${requestScope.page.items}"
					   var="book">


			<tr>
				<td>${book.name}</td>
				<td>${book.price}</td>
				<td>${book.author}</td>
				<td>${book.sales}</td>
				<td>${book.stock}</td>

				<td><a
						href="manager/bookServlet?action=getBook&id=${book.id}&pageNo=${requestScope.page.pageTotal}">修改	 </a></td>

				<td>
					<a class="deleteClass"
							href="manager/bookServlet?action=delete&id=${book.id}&pageNo=${requestScope.page.pageTotal}">删除
				</a></td>
			</tr>
			</c:forEach>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td><a
						href="pages/manager/book_edit.jsp?pageNo=${requestScope.page.pageTotal}">添加图书</a></td>
			</tr>	
		</table>
		<div id="page_nav">
			<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:choose>
<%--				如果总页码小于等于5的情况，页码的范围是: 1-总页码--%>
				<c:when test="${requestScope.page.pageTotal<=5}">
					<c:set var="begin" value="${1}"/>
					<c:set var="end" value="${requestScope.page.pageTotal}"/>

				</c:when>
				<c:when test="${requestScope.page.pageTotal>5}">
<%--					情况2:总页码大于5的情况。假设一共10页--%>
					<c:choose>
<%--					小情况1:当前页码为前面3个: 1, 2, 3的情况，页码范围是: 1-5.--%>
						<c:when test="${requestScope.page.pageNo<=3}">
							<c:set var="begin" value="${1}"/>
							<c:set var="end" value="${5}"/>
						</c:when>
<%--						小情况2:当前页码为最后3个，8, 9，10,页码范围是:总页码减4-总页码--%>
						<c:when test="${requestScope.page.pageNo>requestScope.page.pageTotal-3}">
							<c:set var="begin" value="${requestScope.page.pageTotal-4}"/>
							<c:set var="end" value="${requestScope.page.pageTotal}"/>
						</c:when>
<%--						小情况3: 4, 5, 6, 7,页码范围是:当前页码减2-当前页码加2|--%>
						<c:otherwise>
							<c:set var="begin" value="${requestScope.page.pageNo-2}"/>
							<c:set var="end" value="${requestScope.page.pageNo+2}"/>

						</c:otherwise>
					</c:choose>
				</c:when>
			</c:choose>
			<c:forEach begin="${begin}" end="${end}" var="i">
				<c:if test="${i!=requestScope.page.pageNo}">
					<a href="manager/bookServlet?action=page&pageNo=${i}">${i}</a>
				</c:if>
				<c:if test="${i==requestScope.page.pageNo}">
					【${requestScope.page.pageNo}】
				</c:if>
			</c:forEach>

			<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>
			共${requestScope.page.pageTotal}页，${requestScope.page.pageTotalCount}条记录
			到第<input value="${requestScope.page.pageNo}" name="pn"
					 id="pn_input"/>页
			<input id="searchPageBtn"type="button" value="确定">
		</div>

	</div>

	<div id="bottom">
		<%@include file="/pages/common/footer.jsp"%></div>
</body>
</html>