网站建设实验报告手写上海网站建设 知名觉

分页查询语句

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