实现分页查询

发布于:2025-07-18 ⋅ 阅读:(18) ⋅ 点赞:(0)

分页查询语句

限制查询的 sql 语句:

select * from student limit 0,4

sql 查询结果如下:

在这里插入图片描述

分页查询的每一页都对应一行 sql 语句,若每一行都写单独对应的 sql 语句不仅重复量大而且还需要人工计算页数,不能灵活调整非常不方便,因此我们需要对分页查询的 sql 语句进行归纳总结:

其中 page 表示当前页码, pageSize 表示一页的大小

select * from student limit (page-1),pageSize

这样只需要传两个参数就可以动态进行分页查询

项目中添加分页功能

按钮设置

分页功能要有页码显示,我们需要在前端设置按钮样式:

在这里插入图片描述

在这里插入图片描述

效果图:

在这里插入图片描述

前后端代码

搜索操作需要搜索数据还需要搜索页码数值,搜索数据和搜索页码都需要 page 和 pageSize 值,所以我们可以在 js 文件中直接先将 page 和 pageSize 设置为全局变量传给后端,如图:

在这里插入图片描述

分页查询的加载数据函数:

在这里插入图片描述

分页查询的加载页码函数:
注意这里加载页码函数没写完,因为我们不知道具体是几页,需要后端给返回值再进行添加

在这里插入图片描述

我们可以将排序和分页代码进行 sql 继续拼接,但是要注意数据传到后端是字符串形式,字符串不能进行数字运算,Integer.parseInt()方法可以将数字形字符串返回为int类型的数据

sql+=" order by id limit "+(Integer.parseInt(page)-1)*Integer.parseInt(pageSize)+","+pageSize;

搜索的加载数据和加载页码条件需要保持一致同步,所以这两个两个文件代码内容类似,代码如下:

在这里插入图片描述
搜索数据功能(IndexServlet.java)返回的的是需要所有数据的对象,搜索页码功能(GetCount.java)返回的是数量

加载页码虽然返回的是数量但是它是以 json 的形式返回的数据,打印返回值value如下:

在这里插入图片描述

value.num 才可以获取到具体的数量值,Math.ceil() 是 js 中的方法表示向上取整,这样就可以得到页码数量:

Math.ceil(value.num/pageSize)

完整加载页码函数:

在这里插入图片描述

功能实现

进入页面的时候以及点击搜索之后都需要知道页码数量,所以都需要调函数
这里点击搜索功能设置 page = 1 是因为我们需要从结果的 第一页展示 此外还有 page 重置 的作用

在这里插入图片描述

任意页码切换
数据和样式都需要切换,在HTML中我们将class值为 current 的添加了加深样式,那么样式切换只需要动态地将其他的兄弟节点的current class值删掉仅保留该节点的current class值就可以了

在这里插入图片描述

首页尾页切换
其中首页切换中 $(".item").eq(0) 中 .eq(i) 表示从匹配的元素集合中选取索引为 i 的元素(索引从 0 开始),也可以使用 $(".item").first()
如何进行尾页切换,元素有几个 item 属性值那么就有几页,所以找页码数量可以用统计 item 属性个数的方式

在这里插入图片描述

上一页下一页切换
注意:item 的索引是 page-1,当到第一页时不能再点上一页了,当到最后一页时不能再点下一页了

在这里插入图片描述


网站公告

今日签到

点亮在社区的每一天
去签到