HRS--人力资源系统（Springboot+vue）--打基础升级--（六）分页查询 + 重置按钮

古城微笑少年丶 2023-10-15 11:23 54阅读 0赞

> 一：先弄个简单的重置按钮

1.界面设计就放在搜索框同一列的位置

![dc28056796214548a92306160da4ba97.png][]

2. 在点击重置按钮时，清空搜索框内的内容，同时触发一次无条件查询(这个写法有bug，下面会有说明)

![fb5177e3a1ca4b0083da7d06256e3c72.png][]

> 二：做分页

在MyBatis中，有多种方法可以实现分页。以下是一些常见的方法：

*  原生SQL关键字limit
 *  拦截器（Interceptor）
 *  PageHelper插件

3.前端页面设计：

![a1aa76be553b4c46a4feaa326027ff54.png][]

4.后端返回的值（满足条件的总数量，实际数据信息）

![9884c32aac9845968e30267997620c66.png][]

5. 切换每页多少条数据，跟点前页后页跳页事件

这里可以自己来看官方文档的定义

![68213626aa234eccb180369c7f20758a.png][]

文档指示 四个操作都会有回调参数，参数就是页数。页码的值。所以监听这2个事件，把这2个值动态修改触发查询功能，参数值传入后端接口，做为分页的参数就可以啦

![a05af9f803a94b75a67f62e2eff5e1c6.png][]

> bug1：这里的返回的是Result对象结果数据extend了Page对象，所以返回的数据中除了total外，其它分页数据都是默认值0

解决方式：待定，后面整合下，做一套统一的处理

> bug2：发现，查询过后，点了重置按钮，再也查不出来数据了

原来的重置按钮功能是这么写的，将查询条件workId设置为空，然后重新调查询，大佬一眼就能看出问题所在了

![0cfd1fc0b39947eaa829153951ab0aa3.png][]

看下参数有没有传入，F12看请求接口是有值的，后端也接收到了这个值

![60a8418c5e5745ba8c069185188e94c1.png][]

问题出在这里，重置把分页参数变为0了，sql变成limit 0,0 怎么都查不出来数据

![0534289994324caba510e6273cdcbfa9.png][]解决方式： 就是重置方法里，加上原来的分页参数设置就可以了

![944b6047dd9d4ce99ed0c6d1e6a83fa2.png][]

[dc28056796214548a92306160da4ba97.png]: https://img-blog.csdnimg.cn/dc28056796214548a92306160da4ba97.png
[fb5177e3a1ca4b0083da7d06256e3c72.png]: https://img-blog.csdnimg.cn/fb5177e3a1ca4b0083da7d06256e3c72.png
[a1aa76be553b4c46a4feaa326027ff54.png]: https://img-blog.csdnimg.cn/a1aa76be553b4c46a4feaa326027ff54.png
[9884c32aac9845968e30267997620c66.png]: https://img-blog.csdnimg.cn/9884c32aac9845968e30267997620c66.png
[68213626aa234eccb180369c7f20758a.png]: https://img-blog.csdnimg.cn/68213626aa234eccb180369c7f20758a.png
[a05af9f803a94b75a67f62e2eff5e1c6.png]: https://img-blog.csdnimg.cn/a05af9f803a94b75a67f62e2eff5e1c6.png
[0cfd1fc0b39947eaa829153951ab0aa3.png]: https://img-blog.csdnimg.cn/0cfd1fc0b39947eaa829153951ab0aa3.png
[60a8418c5e5745ba8c069185188e94c1.png]: https://img-blog.csdnimg.cn/60a8418c5e5745ba8c069185188e94c1.png
[0534289994324caba510e6273cdcbfa9.png]: https://img-blog.csdnimg.cn/0534289994324caba510e6273cdcbfa9.png
[944b6047dd9d4ce99ed0c6d1e6a83fa2.png]: https://img-blog.csdnimg.cn/944b6047dd9d4ce99ed0c6d1e6a83fa2.png