本文提供两种分页思路

- 纯 js 分页

- 使用lodash-es实现分页

一、纯js分页

（1）html

<div className={styles['fre-div']}><Row>{list.map((item): JSX.Element => {return (<Col span={4} key={item.id} className={styles['fre-col']}><div className={styles['fre-col__div']}><p className={styles['fre-col__text']}><span>{item.xxx}次</span></p></div></Col>);},)}</Row></div><PaginationonChange={handlePaginationChange}defaultCurrent={pageIndex}total={sumList.length}pageSize={pageSize}className={styles['page-div']}/>
</div>

（2）js代码

state变量声明不再做过多说明

1. list请求函数

 const requestList = useCallback(async (params: CompareFreAnalyParams) => {setLoading(true);//每次请求时需要将数组内原有数据清空setList([]);try {const { result } = await fetchCompareFreAnalyList(params);setSumList(result);//arrSplit 分页函数setList(arrSplit(result, 1, pageSize));} catch (e) {message.warn(e.message || '获取数据失败');}setLoading(false);}, []);

2. 分页组件函数

const handlePaginationChange = useCallback(pagination => {  //获得pageIndexconst list = arrSplit(sumList, pagination, pageSize);setList(list);},[list],);

3. 分页函数

export function arrSplit(arr: any[], index: number, size: number): any[] {const offset = (index - 1) * size;return offset + size >= arr.length ? arr.slice(offset, arr.length) : arr.slice(offset, offset + size);
}

二、lodash实现分页

（1）html代码

<div className={styles['fre-div']}><Row>{current.map((item): JSX.Element => {return (<Col span={4} key={item.id} className={styles['fre-col']}><div className={styles['fre-col__div']}><img className={styles['fre-col__img']} src={item.imageUrl} alt="" /><p className={styles['fre-col__text']}><span>{item.frequency}次</span><a onClick={handleDetail(item.account, item.number, item.name, item.bizCode)}>详情</a></p></div></Col>);},)}</Row>
</div>
<PaginationonChange={handlePaginationChange}defaultCurrent={pageIndex}total={list.length}pageSize={pageSize}className={styles['page-div']}
/>
</div>

（2）js代码

1. 请求函数

    const requestList = useCallback(async (params: CompareFreAnalyParams) => {setLoading(true);setList([]);try {const { result } = await fetchCompareFreAnalyList(params);setList(result);} catch (e) {message.warn(e.message || '获取数据失败');}setLoading(false);}, []);

2. 分页组件函数

    const handlePaginationChange = useCallback(pagination => {const search = queryString.parse(location.search);history.push({pathname: location.pathname,search: queryString.stringify({...search,pageIndex: pagination,}),});},[location.search, location.pathname, history],);

3. 通过useMemo监听分页

import { chunk } from 'lodash-es';const current = useMemo(() => {return chunk(list, pageSize)[pageIndex - 1] || [];}, [list, pageIndex]);

React之实现前端分页相关推荐

react 前端分页查询数据导出excel
react 前端分页查询数据导出excel 前言一.安装file-saver.xlsx插件二.创建export.ts文件三.导出方法前言需求:前端实现导出Table中所有数据(不止是当前页面 ...
Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
react前端开发_是的，React正在接管前端开发。问题是为什么。
react前端开发 by Samer Buna 通过Samer Buna 是的,React正在接管前端开发. 问题是为什么. (Yes, React is taking over front-end ...
php grid 分页,jqGrid实现前端分页
jqgrid 前端分页前提: 不能进行后台分页,或者后台添加分页比较麻烦的话, 打算采取前端分页后台只需要查询全部数据,返回到前端 jqgrid需要后台返回的参数 { page:当前页(默认第一页 ...
如何使用React和Redux前端创建Rails项目
by Mark Hopson 马克·霍普森(Mark Hopson) 如何使用React和Redux前端(加上Typescript!)创建Rails项目 (How to create a Rails ...
锋利的js前端分页之jQuery
原文:锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的 ...
纯JS前端分页方法（JS分页）
1.JS分页函数:开发过程中,分页功能一般是后台提供接口,前端只要传page(当前页码)和pageSize(每页最大显示条数)及对应的其他查询条件,就可以返回所需分页显示的数据. 但是有时也需要前端本 ...
2021 年 Angular vs. React vs. Vue 前端框架对比
2021 年 Angular vs. React vs. Vue 前端框架对比一个是 UI 库(React),另一个是成熟的前端框架(Angular),而其中最年轻的(Vue)则可以称之为渐进式框架 ...
前端分页插件pagination
摘要: 最近在开发项目中又用到了前端分页,以前也做过,为了方便以后使用所以将他封装成第三方插件,不依赖任何库.网上已经有很多插件,问什么还要自己造轮子? 自己写的扩展性高不依赖任何库作为一次技术沉 ...

React之实现前端分页

文章目录

本文提供两种分页思路

- 纯 js 分页

- 使用lodash-es实现分页

一、纯js分页

（1）html

（2）js代码

1. list请求函数

2. 分页组件函数

3. 分页函数

二、lodash实现分页

（1）html代码

（2）js代码

1. 请求函数

2. 分页组件函数

3. 通过useMemo监听分页

React之实现前端分页相关推荐

最新文章

热门文章