半小时速通【页面数据分页】

已于 2022-03-18 11:18:48 修改
阅读量1.1k 收藏 2
点赞数
文章标签： 数据库 java
于 2022-02-07 14:42:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44187760/article/details/122808661
版权

前端页面数据分页

文章目录

导言

前端把每页的对象条数和当前页码发给后端，然后后端根据数值从数据库用SQL语句查询出来。

select * from t_table limit (pageNo - 1) * pageSize pageSize

涉及到要用三层架构的问题所以web层并不能直接和dao交互所以在交互的过程中还要建立page分页对象

效果大致是这样

首页 上一页 1 [2] 3 4 5 下一页 末页 共9页，18条记录 到第[input]页[确定]

下面是整体思路

后端整体思路

一、建立page分页对象（bean层）

在分页对象中有五个属性，分别是

  • 当前页码
  • 每页的数据条数
  • 总页码
  • 总记录数（数据总条数）
  • 当前页的对象（考虑到代码复用的关系，用泛型）
public class Page<T> {

    public static final Integer PAGE_SIZE = 4;

    private Integer pageNo;//当前页码
    private Integer pageTotal;//总页码    pageTotalCount / pageSize  (+1)
    private Integer pageTotalCount;//总记录条数 select count(*) from table
    private Integer pageSize = PAGE_SIZE;//每页条数
    private List<T> items;//当前页的项

    /**
    getter 
    setter 
    constructor 
    toString
    */
}
  • 当前页码和每页的数据条数的确定的
  • 总记录数从数据库中查询
  • 总页数为
    • 总记录数 / 每页条数
    • 如果有余数 总页数+1
  • 每页 数据对象从数据库中查询，封闭成一个List集合

二、DAO层

  • 查询总记录数
  • 查询当前页的数据对象List集合

@Override
public Integer queryPageTotalCount() {
    String sql = "select count(*) from book;";
    Number number = (Number)queryForOneValue(sql);
    return number.intValue();
}

@Override
public List<Book> queryPageItems(Integer pageNo, Integer pageSize) {
    String sql = "select * from book limit ?,?";
    Integer begin = (pageNo - 1) * pageSize;
    Integer length = pageSize;

    List list = queryForList(Book.class,sql, begin, length);

    return list;
}

三、service层

  • 调用DAO层得到总记录数、当前页的数据对象List集合
  • 确定的当前的页码、每页的数据条数
  • 计算出总页数
  • 封闭成一个page分页bean对象

private BookDao bookDao = new BookDaoImpl();

@Override
public Page<Book> pageQueryForPrice(Integer pageNo, Integer pageSize, Integer min, Integer max) {
    // 求出总记录条数
    Integer pageTotalCount =  bookDao.queryPageTotalCountForPrice(min,max);
    // 求出总页码
    Integer pageTotal = pageTotalCount / pageSize;
    if(pageTotalCount % pageSize > 0) {
        pageTotal++;
    }

    // 数据边界
    if(pageNo < 1) {
        pageNo = 1;
    } else if(pageNo > pageTotal) {
        pageNo = pageTotal;
    }

    List<Book> books = bookDao.queryPageItemsForPrice(pageNo, pageSize,min,max);

    Page<Book> bookPage = new Page<>(pageNo,pageTotal,pageTotalCount,pageSize,books);

    return bookPage;
}

四、web层

  • 主要从前端接收请求
  • 调用service层得到page对象
  • 把当前的分页对象集合数据发给前端
  • 前端做显示

private BookService bookService = new BookServiceImpl();

/**
 * 分页显示图书
 * @param req
 * @param resp
 * @throws ServletException
 * @throws IOException
 */
protected void page(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    String page = req.getParameter("page");
    Integer pageNo = Integer.valueOf(page);
    Integer pageSize = 4;

    Page<Book> pageBooks = bookService.page(pageNo, pageSize);

    req.setAttribute("page",pageBooks);

    req.getRequestDispatcher("/pages/manager/book_manager.jsp").forward(req,resp);
}

前端（JSP+JSTL）

首页、上一页、下一页、末页

  • 首页就是1
  • 末页就是总页码数
  • 下一页是当前页+1
  • 上一页是当前页-1
  • 为防止用户调皮，要对每个项做隐性处理
    • 如果当前页为第一页，首页和上一页不能用
    • 如果当前页是最后一页，末页和下一页不能用
  • 加上不能选中复制的样式，提升体验
    • style="user-select: none
  • 对总记录数和总页码显示
<div id="page_nav" style="user-select: none">
	<c:if test="${ requestScope.page.pageNo > 1}">
		<a href="bookServlet?action=page&page=1">首页</a>
		<a href="bookServlet?action=page&page=${ requestScope.page.pageNo - 1 }">上一页</a>
	</c:if>
	<c:if test="${ requestScope.page.pageNo <= 1}">
		首页
		上一页
	</c:if>
	
	<%--分页条位置--%>

	<c:if test="${ requestScope.page.pageNo < requestScope.page.pageTotal }">
		<a href="bookServlet?action=page&page=${ requestScope.page.pageNo + 1}">下一页</a>
		<a href="bookServlet?action=page&page=${ requestScope.page.pageTotal }">末页</a>
	</c:if>
	<c:if test="${ requestScope.page.pageNo >= requestScope.page.pageTotal}">
		下一页
		末页
	</c:if>
	共${ requestScope.page.pageTotal }页，${ requestScope.page.pageTotalCount }条记录
	到第<input value="" name="pn" id="pn_input"/>页
	<input id="searchPageBtn" type="button" value="确定">
</div>

页码跳转

<script type="text/javascript">
    window.onload = function () {
		document.getElementById("searchPageBtn").onclick = function () {
			var pageNo = document.getElementById("pn_input").value;
			window.location.href = "bookServlet?action=page&page=" + pageNo;
		}
	}
</script>

到第<input value="" name="pn" id="pn_input"/>页
<input id="searchPageBtn" type="button" value="确定">

页码条的显示

  • 当前页要在页码条的中间
  • 页码条为奇数
// 5条
1 2 [3] 4 5

// 7
1 2 3 [4] 5 6 7
1、如果总页码数 <= 分页条长度
  • 直接显示所有的分页条
  • 1 到 总页码（末页）
<c:when test="${ requestScope.page.pageTotal <= pageScope.PAGE_NO_LENGTH }">
    <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="bookServlet?action=page&page=${ i }">${ i }</a>
    	</c:if>
    </c:forEach>
</c:when>
2、如果总页码数 > 分页条长度
2.1、如果当前页<=前几页分页条中间数
  • 比如说分页条为1 2 3 4 5、中间是3
  • 当前页为1、2、3
  • [1] 2 3 4 5
  • 1 [2] 3 4 5
  • 1 2 [3] 4 5
  • 分页条的中间公式
    • 分页条长度 / 2 + 1
  • 比如 5 / 2 + 1 == 3
  • 显示1 到 分页条长度
<c:when test="${ requestScope.page.pageNo <= (pageScope.PAGE_NO_LENGTH / 2 + 1) }">
	<c:forEach begin="1" end="${ pageScope.PAGE_NO_LENGTH  }" var="i">
		<c:if test="${ i == requestScope.page.pageNo }">
			[${ i }]
		</c:if>
		<c:if test="${ i != requestScope.page.pageNo }">
			<a href="bookServlet?action=page&page=${ i }">${ i }</a>
		</c:if>
	</c:forEach>
</c:when>
2.2、如果当前页 >= 最后几页中间数
  • 比如总共10页、分页条长度是5
  • 最后为6 7 [8] 9 10、中间是8
  • 6 7 [8] 9 10
  • 6 7 8 [9] 10
  • 6 7 8 9 [10]
  • 最后几页中间数公式
    • 总页码数 - (分页条长度 / 2)
  • 10 - (5 / 2) = 8
  • 显示 总页数 - 分页条长度 + 1 到 总页数（末页）
<c:when test="${ requestScope.page.pageNo >= requestScope.page.pageTotal - (pageScope.PAGE_NO_LENGTH  / 2) }">
	<c:forEach begin="${ requestScope.page.pageTotal - (pageScope.PAGE_NO_LENGTH - 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="bookServlet?action=page&page=${ i }">${ i }</a>
		</c:if>
	</c:forEach>
</c:when>
2.3、其它情况
  • 不满足上面两个的任一情况
  • 比如总共10页、分页条长度是5
  • 2 3 [4] 5 6
  • 3 4 [5] 6 7
  • 4 5 [6] 7 8
  • 5 6 [7] 8 9
  • 显示当前页 - (分页条长度 / 2) 到 当前页 + (分页条长度 / 2)
<c:otherwise>
	<c:forEach begin="${ requestScope.page.pageNo - (pageScope.PAGE_NO_LENGTH / 2) }" end="${ requestScope.page.pageNo + (pageScope.PAGE_NO_LENGTH / 2)  }" var="i">
		<c:if test="${ i == requestScope.page.pageNo }">
			[${ i }]
		</c:if>
		<c:if test="${ i != requestScope.page.pageNo }">
			<a href="bookServlet?action=page&page=${ i }">${ i }</a>
		</c:if>
	</c:forEach>
</c:otherwise>

整体代码

  • 在EL表达式中两个整数相除结果会自动转成小数类型
  • 因为页条长度是奇数
  • 所以，每次 /2 时先 -1
<%!
	public static final int PAGE_NO_LENGTH = 5;
%>
<%
	pageContext.setAttribute("PAGE_NO_LENGTH",PAGE_NO_LENGTH);
%>
<div id="page_nav" style="user-select: none">
	<c:if test="${ requestScope.page.pageNo > 1}">
		<a href="bookServlet?action=page&page=1">首页</a>
		<a href="bookServlet?action=page&page=${ requestScope.page.pageNo - 1 }">上一页</a>
	</c:if>
	<c:if test="${ requestScope.page.pageNo <= 1}">
		首页
		上一页
	</c:if>
<%--		分页条--%>
	<c:choose>
<%--			如果总页码小于5   1,2,3,4,5  1,2,3,4  --%>
		<c:when test="${ requestScope.page.pageTotal <= pageScope.PAGE_NO_LENGTH }">
			<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="bookServlet?action=page&page=${ i }">${ i }</a>
				</c:if>
			</c:forEach>
		</c:when>
		<c:when test="${ requestScope.page.pageTotal > pageScope.PAGE_NO_LENGTH }"><%-- 页码大于5  --%>

			<c:choose>
				<%--				pageno<=3    1,2,[3],4,5  --%>
				<c:when test="${ requestScope.page.pageNo <= ((pageScope.PAGE_NO_LENGTH - 1) / 2 + 1) }">
					<c:forEach begin="1" end="${ pageScope.PAGE_NO_LENGTH  }" var="i">
						<c:if test="${ i == requestScope.page.pageNo }">
							[${ i }]
						</c:if>
						<c:if test="${ i != requestScope.page.pageNo }">
							<a href="bookServlet?action=page&page=${ i }">${ i }</a>
						</c:if>
					</c:forEach>
				</c:when>

				<%--				pageno>pagetotal - 3    6，7，[8]，9，10 --%>
				<c:when test="${ requestScope.page.pageNo >= requestScope.page.pageTotal - ((pageScope.PAGE_NO_LENGTH - 1) / 2) }">
					<c:forEach begin="${ requestScope.page.pageTotal - (pageScope.PAGE_NO_LENGTH - 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="bookServlet?action=page&page=${ i }">${ i }</a>
						</c:if>
					</c:forEach>
				</c:when>

				<%--				否则    2,3,[4],5,6  --%>
				<c:otherwise>
					<c:forEach begin="${ requestScope.page.pageNo - ((pageScope.PAGE_NO_LENGTH - 1) / 2) }" end="${ requestScope.page.pageNo + ((pageScope.PAGE_NO_LENGTH - 1) / 2)  }" var="i">
						<c:if test="${ i == requestScope.page.pageNo }">
							[${ i }]
						</c:if>
						<c:if test="${ i != requestScope.page.pageNo }">
							<a href="bookServlet?action=page&page=${ i }">${ i }</a>
						</c:if>
					</c:forEach>
				</c:otherwise>

			</c:choose>

		</c:when>
	</c:choose>

	<c:if test="${ requestScope.page.pageNo < requestScope.page.pageTotal }">
		<a href="bookServlet?action=page&page=${ requestScope.page.pageNo + 1}">下一页</a>
		<a href="bookServlet?action=page&page=${ requestScope.page.pageTotal }">末页</a>
	</c:if>
	<c:if test="${ requestScope.page.pageNo >= requestScope.page.pageTotal}">
		下一页
		末页
	</c:if>
	共${ requestScope.page.pageTotal }页，${ requestScope.page.pageTotalCount }条记录
	到第<input value="" name="pn" id="pn_input"/>页
	<input id="searchPageBtn" type="button" value="确定">
</div>
幻雨_
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网页数据分页
super0704的博客
12-06 357
数据分页概述 对大量数据进行分页显示是 Web 开发中最常见的情况，但大多刚开始接触 Web 开发的开发人员，对分页技术往往比较迷惘，下面用注册用户信息的数据为例来演示一下 PHP 中基本的数据分页显示原理。 数据准备 |id|user |pwd |1|小张|123 |2|小李|345 |3|小王|123 |4|小孙|345 |5|张三|123 |6|李四|345 在这里插入代码片 ...
Java Web快速入门之 页面数据分页
oyang的博客
04-12 989
JSP项目如何使用分页效果使界面的数据,点击上一页/下一页/首页/尾页 实现分页效果,分页总思路
Java Web分页功能详解
最新发布
2401_84098058的博客
05-05 739
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
网页开发入门之解决数据分页问题
m0_38115492的博客
04-23 385
在网页开发的过程中我们经常会看到一些有与数据较多时需要分页的情况，因此笔者在次详细地总结一下达到网页开发中的分页效果的代码： 工具：Eclipse 代码如下： contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>     //首先加载数据库驱动，这里选择的是mysql数据库 Connecti
第二周学习利用分页对页面数据进行处理
Reckless_hrl的博客
03-01 175
一、如何利用分页处理也页面数据 1、在pom文件导入架包： <!-- 分页架包 --> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>5....
Java Web -【分页功能】详解
心猿问道的博客
12-04 1320
分页简介 分页功能在网页中是非常常见的一个功能，其作用也就是将数据分割成多个页面来进行显示。 使用场景： 当取到的数据量达到一定的时候，就需要使用分页来进行数据分割。 当我们不使用分页功能的时候，会面临许多的问题： 客户端的问题： 如果数据量太多，都显示在同一个页面的话，会因为页面太长严重影响到用户的体验，也不便于操作，也会出现加载太慢的问题。 服务端的问题： 如果数据量太多，可能会造成内存溢出，而且一次请求携带的数据太多，对服务器的性能也是一个考验。 分页的分类 分页的实现分为真..
jsp页面数据分页模仿百度分页效果(实例讲解)
10-19
下面小编就为大家带来一篇jsp页面数据分页模仿百度分页效果(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
WPF的数据分页控件
01-19
WPF提供的DataPager控件是实现数据分页的主要工具，它与数据绑定源（如ICollectionView）配合使用，允许用户在界面上导航不同的数据页面。DataPager控件通常包含页码按钮和页大小选择器，用户可以通过这些元素来切换...
json表格数据分页切换代码
06-24
通过理解并实践“json表格数据分页切换代码”，开发者可以创建出高性能、用户体验良好的数据展示页面，尤其在处理大数据集时，这种技术显得尤为重要。同时，这也是提升Web应用专业性和用户体验的关键步骤之一。
jQuery分页动态数据表格插件
06-24
在jQuery分页表格中，动态数据可能来源于Ajax请求，当用户切换页面或者进行其他操作时，插件会向服务器发送请求，获取对应页面的数据，并实时更新表格内容，无需刷新整个页面。 “数据表格”是组织和展示结构化数据...
winform的分页控件，带数据分页
01-14
“数据分页”是指在后台处理数据时，只检索当前页面所需的数据，而不是全部数据。这可以通过SQL查询中的`OFFSET`和`FETCH`语句（在SQL Server中）或`LIMIT`和`OFFSET`（在MySQL中）来实现。对于非SQL数据库，可以...
JSP——分页查询
不迁怒，不贰过。小知识，大智慧。
01-11 1379
JSP分页查询
JSP自定义通用分页详解
让优秀成为一种习惯！
06-28 1841
在实际javaweb项目开发过程中，由于需要展示的数据很多我们常常要用到分页功能，特别是针对不同数据表的分页，我们需要写许多重复的代码，所有我们设计一个通用分页功能，该方法能对象不同数据表进行分页，从而简化代码，提高开发效率。这里只编写一个实体进行测试，JUnit是一个Java编程语言的单元测试框架。它提供了一组注解和断言方法来编写和运行单元测试。
JSP：通过数学逻辑+JSTL实现简单的分页功能
Pb_23333的博客
06-26 98
其中，要展示的页面内容是一样的代码，这边分两种情况是为了让数据总条数不能整除也能正常显示，
java 手动计算totalPage
KyrieXJL的博客
02-10 786
分页计算
分页的实现
qq_48578877的博客
09-02 502
分页实现案例
网页上的信息分页显示
越努力越幸运
08-13 1668
网页上有一个连接数据库的表格，由于表里添加的数据太多，分页显示会更加清晰。 需要的数据： 1.每页显示多少条信息：pagesize 2.显示行的起始索引：offset 3:总共有多少天信息：count 所以我们现在要算0-9，10-19,20-29之间的规律 1.总记录数：count="select count(*) from t_article"; 2.末页码数：pageN...
JSP页面分页显示数据
热门推荐
白夜的随笔
05-30 1万+
一、源代码（这里以一个Java web的留言板项目为例）： 1.Dao层操作数据库的方法（MessageDao.java） 设置每页显示的最大留言条数： private final int MAX_SIZE = 2; // 每页显示的最大留言数 从数据库读取留言的总条数，计算出总页数： public int getCountPage() throws SQLExcepti
ASP.NET Repeater 数据分页实现与Ajax分页控件
"本文将详细介绍如何在ASP.NET中使用Repeater控件实现高效的数据分页功能，包括分页控件的源代码示例和关键属性的解释。" 在ASP.NET Web开发中，Repeater控件是一种非常灵活的数据绑定控件，它允许开发者自定义模板...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值