Q5-react antd将分页写在table外面

思路:

首先利用Pagination antd的组件,当onchange时,可以返回page和pageSize,然后利用page和pageSize对从接口获取的数据进行过滤;

① 初始化时,将data数据存入list中,将total 记录总数赋值;

然后由于useMemo触发,会对list进行筛选(开始时,condition为空的,所以还是list本身数据),筛选结果进行赋予序号,用于显示,

然后根据page和pageSize进行filter过滤,再将结果返回给table使用;

② 当点击分页的页码标签或者上一页下一页或者快速跳转时,会再次更新page和pageSize,重复①步骤,进行筛选;

③ 当输入查询关键字时,需要先将page置为1,也就是初始页码,然后重复①步骤;这就是为什么会出现

dispatch({ type: 'conditon', condition: value , page: 1 })


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容