分页查询语句
限制查询的 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,当到第一页时不能再点上一页了,当到最后一页时不能再点下一页了