关于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 ...
随机推荐
- Qt如何实现不规则弹窗
1.无边框: 2.放图: 3.重写鼠标函数(问题是:怎么确定不规则弹窗的响应范围?挖坑待填)
- 使用VSCode调试Jest
0. 环境 Node版本:8.12.0 操作系统:windows10 1. 配置launch.json { "version": "0.2.0", " ...
- docker容器的时间同步
好久没写博客了,有时间开始陆续整理一下工作中遇到的问题,今天罗列一下docker容器的时间同步问题 我们每次在run容器的时候,会存在时区不同的问题,这样对数据处理会有很大障碍,操作如下: 第一种方式 ...
- python多环境下虚拟环境的搭建和使用
由于开发环境要求,或者实际需要.经常会出现python2.7和python3.x共存下的开发环境问题.虚拟环境的搭建可以很好的隔离Projects的开发环境. 1.首先解决python2.7和pyth ...
- krpano 常用标签
<krpano></krpano>根标签 相当于 <body> <scene></scene>一个全景图场景 <image> 图 ...
- pycharm配置QtDesigner
QtDesigner C:\Qt\Qt5.12.2\5.12.2\mingw73_64\bin\designer.exe $ProjectFileDir$ Pyuic C:\Anaconda3\pyt ...
- helm一键 安装mariadb-ha(详细)
一. 二.单机安装一主一从 先创建对应pv https://github.com/helm/charts/blob/master/stable/mariadb/templates/master-sta ...
- IIS环境配置和项目部署
本人实际工作项目中IIS部署,亲测可用~~ 具体步骤: 1.打开控制面板 2.打开程序和功能 3.打开或关闭Windous功能 然后勾选相关内容: 4.添加应用程序 先打开iis管理器页面(控制面板— ...
- 李航《统计学习方法》CH02
CH02 感知机 前言 章节目录 感知机模型 感知机学习策略 数据集的线性可分性 感知机学习策略 感知机学习算法 感知机学习算法 感知机学习算法的原始形式 算法的收敛性 感知机学习算法的对偶形式 导读 ...
- 16、for-of循环
forEach不支持break for-in把数组当做对象来遍历,但是只能遍历出索引值 for-of循环可以遍历出数组的每一项值,支持break 1.for-in示范: 2.for-of示范 3.fo ...