关于react的分页
基于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的分页的更多相关文章
- react+antd分页 实现分页及页面刷新时回到刷新前的page
antd框架地址:https://ant.design/index-cn 利用antdUI框架做了个分页,其他功能都没问题,但是页面跳转后刷新会回到第一页,经过学习,在组件里增加了hash值,详情请看 ...
- ReactJS实现的通用分页组件
大家多少都自己写过各种版本的分页工具条吧,像纯服务版的,纯jsWeb板的,Angular版的,因为这个基础得不能再基础的功能太多地方都会用到,下面我给出以个用ReactJS实现的版本,首先上图看下效果 ...
- 用react分页显示数据
去年年底,尝试着用react写个组件化的页面! demo地址 里面有一个list页面弄了一下数据的分页展示 展示一下主要三个组件:父组件listBox.列表组件List.按钮组件PageButton ...
- 网站功能操作分布引导插件:Intro.js介绍;React里如何使用Intro.js以及如何进行分页导航
插件作用:使用向导,引导新用户正确使用Web网站.我的环境是React+Mobx. 基本使用介绍,参加代码地址里的README.md:https://github.com/usablica/intro ...
- React后台管理系统- rc-pagination分页组件封装
1.用户列表页面使用的rc-pagination分页组件 Github地址: https://github.com/react-component/pagination 2.安装 cnpm insta ...
- react+antd 点击分页为上次操作结果
最近项目中在使用antd的分页组件时发生了第一次点击分页无变化,再次点击时数据为上一次的分页结果,代码如下: setPageIndex = (pagination)=> { const page ...
- 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...
- react 结合antd 实现分页效果
import React, { useState, useEffect } from "react"; // antd import { Pagination } from &qu ...
- React,js实现分页的案列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
随机推荐
- iso移动端input的bug解决(vue)
iso中input很奇怪,点击空白地方,键盘也不会消失,影响页面中其他功能 解决办法: 点击的元素不是input或者textarea,那么就让上一个获得焦点的输入框失去焦点. 涉及的代码: <i ...
- 快速签发 Let's Encrypt 证书指南
本文仅记录给自己的网站添加"小绿锁"的动手操作过程,不涉及 HTTPS 工作原理等内容的讲解,感兴趣的同学可以参考篇尾的文章自行了解. 简单了解下我的实验环境: 云服务器:Cent ...
- HDU 5616 Jam's balance(Jam的天平)
HDU 5616 Jam's balance(Jam的天平) Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K ...
- VS 编译错误【error C4996: 'scanf': This function or variable may be unsafe. 】的解决方案
在VS中编译 C 语言项目,如果使用了 scanf 函数,编译时便会提示如下错误: error C4996: 'scanf': This function or variable may be uns ...
- pycharm安装配置
激活 教程https://blog.csdn.net/u014044812/article/details/78727496 推荐修改host文件的方法 配置 https://blog.csdn.ne ...
- java日期和时间Date、Calendar、SimpleDateFormat
1 时间和日期 1.1 日期类Date和格式化SimpleDateFormat 日期使用过程中需要将日期Date对象转化为字符串,或者将字符串形式的日期转化为日期Date对象.可 ...
- Python用上锁和解锁 lock lock.acquire lock.release 模拟抢火车票
Python用上锁和解锁 lock lock.acquire lock.release 模拟抢火车票 import jsonimport timefrom multiprocessing impor ...
- 基于iview 封装一个vue 表格分页组件
iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...
- 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 ...
- [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: 找出数组中最大的数 ...