分页显示的功能实现:
- 一、分页显示无处不在
- 意义:
- 二、前期准备
- (1)jar包
- (2)头部标签
- 三、具体实现分析
- 1. 实现:首页上一页
- 2. 实现:末页下一页
- 3.实现:输入页面跳转
- 4. 实现:显示 1 2【3】4 5,多页面选项
- |-- 如果总页码小于等于 5 的情况,页码的范围是:`1-总页码`
- |-- 如果总页码大于5,那么就需要分情况讨论
- 四、总的分析
一、分页显示无处不在
意义:
实际中不会将所有数据一起显示出来,加载费时,效率也低,所以需要考虑数据的分页显示
二、前期准备
(1)jar包
(2)头部标签
<%@ taglib prefix="C" uri="http://java.sun/jsp/jstl/core" %>
<%@ taglib prefix="c" uri="http://java.sun/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>
更多推荐
JSP+JSTL+EL表达式,实现web页面的页面跳转功能(上一页下一页首页末页页面跳转)
发布评论