基于antdesign分页:
表格属性pagination
<Table
pagination={{
total: this.state.totalNum,
showSizeChanger: true,
showQuickJumper: true,
pageSizeOptions: ['10', '20', '50'],
defaultPageSize: this.state.pageSize,
showTotal: total => {
return `共${total}条`;
},
}}
onChange={this.onTableChange}
/>

在 state里面声明
this.state = {
pageSize: 20, // 表格size
pageNo: 1, // 表格页数
totalNum: null, // 表格数据总数
};
进入页面的时候获取到关于分页的数据
componentWillMount() {
this.getData();
}
// 获得数据
getData = () => {
this.setState({loading: true});
promiseAjax.post('tp/summaryGroups/page', {
pageSize: this.state.pageSize,
pageNo: this.state.pageNo,
orders: {
beginDate: 'desc',
}, // orders排列顺序
}).then(res => {
if (res.code === '0') {
this.setState({
data: res.data.data,
pageSize: res.data.pageSize,
pageNo: res.data.pageNo,
totalNum: res.data.totalNum,
});
}
}

// 表格变动
onTableChange = (pagination) => {
this.setState({
pageSize: pagination.pageSize,
pageNo: pagination.current,
}, () => {
this.getData();
});
}
注意⚠️
在table里面onChange事件的位置,如果pagination作为 table的属性来写那么onChange写在pagination的外面,如上。如果pagination作为单独的组件,onChange事件则需要写在pagination的里面,可以参考antdesign的分页组件的API

关于react的分页的更多相关文章

  1. react+antd分页 实现分页及页面刷新时回到刷新前的page

    antd框架地址:https://ant.design/index-cn 利用antdUI框架做了个分页,其他功能都没问题,但是页面跳转后刷新会回到第一页,经过学习,在组件里增加了hash值,详情请看 ...

  2. ReactJS实现的通用分页组件

    大家多少都自己写过各种版本的分页工具条吧,像纯服务版的,纯jsWeb板的,Angular版的,因为这个基础得不能再基础的功能太多地方都会用到,下面我给出以个用ReactJS实现的版本,首先上图看下效果 ...

  3. 用react分页显示数据

    去年年底,尝试着用react写个组件化的页面! demo地址 里面有一个list页面弄了一下数据的分页展示 展示一下主要三个组件:父组件listBox.列表组件List.按钮组件PageButton ...

  4. 网站功能操作分布引导插件:Intro.js介绍;React里如何使用Intro.js以及如何进行分页导航

    插件作用:使用向导,引导新用户正确使用Web网站.我的环境是React+Mobx. 基本使用介绍,参加代码地址里的README.md:https://github.com/usablica/intro ...

  5. React后台管理系统- rc-pagination分页组件封装

    1.用户列表页面使用的rc-pagination分页组件 Github地址: https://github.com/react-component/pagination 2.安装 cnpm insta ...

  6. react+antd 点击分页为上次操作结果

    最近项目中在使用antd的分页组件时发生了第一次点击分页无变化,再次点击时数据为上一次的分页结果,代码如下: setPageIndex = (pagination)=> { const page ...

  7. 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

  8. react 结合antd 实现分页效果

    import React, { useState, useEffect } from "react"; // antd import { Pagination } from &qu ...

  9. React,js实现分页的案列

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. iso移动端input的bug解决(vue)

    iso中input很奇怪,点击空白地方,键盘也不会消失,影响页面中其他功能 解决办法: 点击的元素不是input或者textarea,那么就让上一个获得焦点的输入框失去焦点. 涉及的代码: <i ...

  2. 快速签发 Let's Encrypt 证书指南

    本文仅记录给自己的网站添加"小绿锁"的动手操作过程,不涉及 HTTPS 工作原理等内容的讲解,感兴趣的同学可以参考篇尾的文章自行了解. 简单了解下我的实验环境: 云服务器:Cent ...

  3. HDU 5616 Jam's balance(Jam的天平)

    HDU 5616 Jam's balance(Jam的天平) Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K ...

  4. VS 编译错误【error C4996: 'scanf': This function or variable may be unsafe. 】的解决方案

    在VS中编译 C 语言项目,如果使用了 scanf 函数,编译时便会提示如下错误: error C4996: 'scanf': This function or variable may be uns ...

  5. pycharm安装配置

    激活 教程https://blog.csdn.net/u014044812/article/details/78727496 推荐修改host文件的方法 配置 https://blog.csdn.ne ...

  6. java日期和时间Date、Calendar、SimpleDateFormat

    1       时间和日期 1.1      日期类Date和格式化SimpleDateFormat 日期使用过程中需要将日期Date对象转化为字符串,或者将字符串形式的日期转化为日期Date对象.可 ...

  7. Python用上锁和解锁 lock lock.acquire lock.release 模拟抢火车票

    Python用上锁和解锁  lock lock.acquire lock.release 模拟抢火车票 import jsonimport timefrom multiprocessing impor ...

  8. 基于iview 封装一个vue 表格分页组件

    iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...

  9. append导致TypeError: 'NoneType' object is not iterable

    a=[1,2,3] a.append(4) a Out[4]: [1, 2, 3, 4] a=a.append(5) print(a) None a =[1,2,3] print(a.append(4 ...

  10. [leecode]---11.container with most water

    description: Input: [1,8,6,2,5,4,8,3,7]Output: 49 思路1: 从(1,a1)开始向后算面积,需要两层n循环,时间复杂度n2 思路2: 找出数组中最大的数 ...