ant design pro 分页

原创 2018年04月16日 16:12:47

因为Table自带分页,但是是前台分页,获取所有数据,自动分页数据大,不太友好,所以改为单独请求数据。

import { Button, Row, Col, Icon, Steps, Card, Table, Divider, Input, Form, Popconfirm, Modal, message, Menu, DatePicker ,Pagination} from 'antd';

  getPages = (page) => {
    this.setState({loading:true ,page:page})
    this.props.dispatch({
      type: 'confirmOrder/getOrder',
      payload: {
        rows: 10,
        page: page,
      },
    }).then(()=>{
      this.setState({loading:false})
    })
  }


<Table 
        dataSource={data.list} 
        columns={columns} 
        rowKey='agentId' 
        pagination={false} 
        bordered={false} 
        loading={loading}
        />
        <Pagination defaultCurrent={1} total={data.total} onChange={this.getPages} style={{marginTop:"20px",float:"right"}}/>

利用onChange每次点击获取页数,赋值给page,请求时获取就行了。

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_25252769/article/details/79962084

关于 ant Design的分页组件的应用

利用ant Design的Table组件的pagination属性,进行分页。
  • qq_17280559
  • qq_17280559
  • 2017-03-26 21:35:48
  • 3477

一起玩react 10分钟带你入门ant-design-pro

前言这篇文章主要根据自己最近一个月从学习react到最近实际使用ant-design-pro,谈一谈自己的使用心得,个人见解有误的地方望大家指正!1、为什么要选择ant-design-pro?其实我来...
  • luo1055120207
  • luo1055120207
  • 2018-01-02 16:51:08
  • 1660

Ant Design Pro---项目之前

注:文件名请勿使用中文,否则会出现异常。 Ant Design Pro是基于ES5、React、antd、dva、g2开发的开源框架;1.使用集成化的命令行工具 ant-design-pro-cli...
  • jiuwanli666
  • jiuwanli666
  • 2017-11-28 13:25:33
  • 5650

Ant Design Pro 开发记录

Ant Design Pro 是一款适用于中后台的前端框架,基于React, dva.js, Ant Design。 关于路由的问题 在 src/common/router.js 中, 配置路...
  • gx15366039985
  • gx15366039985
  • 2018-02-08 22:29:34
  • 897

Ant Design Pro学习手记

dva知识:https://github.com/dvajs/dva-knowledgemap#const-%E5%92%8C-let1.官方文档:https://pro.ant.design/doc...
  • xiaren_1988
  • xiaren_1988
  • 2018-03-05 16:31:15
  • 793

服务端实现分页效果的几种思路

对于通过列表展示的数据来说,分页是一个不择不扣的需求,毕竟人类肉眼目所能及的极限摆在那里 如果把分页交给前端搞了话,那么就需要一次性把数据全量查出来,交给前端,浏览器能Hold住多大的数据,会吃...
  • hfcenter
  • hfcenter
  • 2017-12-12 20:58:00
  • 474

Ant Design Pro 使用Authorized组件做权限验证

Ant Design Pro做为阿里旗下的开源前端框架其优秀和优势就不用赘述了。 请看下图 今天我们要讲的是如何在ant design pro中做权限验证。 先上代码: import ...
  • parseserver
  • parseserver
  • 2018-01-10 17:55:53
  • 1428

react项目学习笔记三(ant design)

虽然蚂蚁金服的同学一直很低调,但我还是想为 ant.design 背个书。 严谨地说 ant.design 并不仅仅是一系列的 React 组件,更是 —— 按照他们自己的说法 —— 一个 UI 设...
  • jimolangyaleng
  • jimolangyaleng
  • 2017-07-25 17:25:13
  • 883

nodejs(3):使用 Ant Design 开发web项目

本文的原文连接是: http://blog.csdn.net/freewebsys/article/details/77644929 未经博主允许不得转载。 博主地址是:http://blog.c...
  • freewebsys
  • freewebsys
  • 2017-08-28 11:02:01
  • 2573

Ant-design-Table

1、将表格以组件形式加入到页面中:实现功能有分页显示和隐藏展开 2、代码思路如下: let Component_Table = React.createClass({ render(){ cons...
  • zsspj12
  • zsspj12
  • 2016-10-24 17:02:35
  • 3384
收藏助手
不良信息举报
您举报文章:ant design pro 分页
举报原因:
原因补充:

(最多只允许输入30个字)