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

一:先弄个简单的重置按钮

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

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

二:做分页

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

  • 原生SQL关键字limit
  • 拦截器(Interceptor)
  • PageHelper插件

3.前端页面设计:

4.后端返回的值(满足条件的总数量,实际数据信息)

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

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

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

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

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

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

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

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

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

解决方式: 就是重置方法里,加上原来的分页参数设置就可以了

相关推荐
We་ct20 分钟前
LeetCode 173. 二叉搜索树迭代器:BSTIterator类 实现与解析
前端·算法·leetcode·typescript
weixin_3954489126 分钟前
main.c_0222cursor
c语言·前端·算法
无尽的沉默1 小时前
Thymeleaf 表达式
java·开发语言·前端
无尽的沉默1 小时前
Spring Boot 整合 Thymeleaf 模板引擎
java·前端·spring boot
We་ct1 小时前
从输入URL到页面显示的完整技术流程
前端·edge·edge浏览器
先做个垃圾出来………1 小时前
DeepDiff差异语义化特性
服务器·前端
蓝帆傲亦2 小时前
前端常用可视化图表组件大全
前端
颜酱2 小时前
前缀和技巧全解析:从基础到进阶
javascript·后端·算法
CappuccinoRose2 小时前
HTML语法学习文档(九)
前端·学习·架构·html5
NEXT062 小时前
BFC布局
前端·css·面试