ant design pro 分页

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

方式一:

import { Button, Row, Col, Icon, Steps, Card, Table, Divider, Input, Form, Popconfirm, Modal, message, Menu, DatePicker ,Pagination} from 'antd';
import { defaultPageSize } from '../../../utils/utils';//defaultPageSize = 8
state={
	page:1,
	searchVal:{} //搜索条件
}
getPages = (page) => {
	let obj ={
      rows: defaultPageSize,
      page: page,
    }
    this.setState({loading:true })
    this.props.dispatch({
      type: 'confirmOrder/getOrder',
      payload: {
        rows: 10,
        page: {...obj ,...this.state.searchVal },
      },
    }).then(()=>{
      this.setState({loading:false ,page:page})
    })
  }


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

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

//利用Table,分页(后台分页)
//Table一般和搜索结合,所以要处理搜索结果分页
//defaultPageSize全局变量 defaultPageSize = 8

import { defaultPageSize } from '../../../utils/utils';//defaultPageSize = 8
state={
	page:1,
	searchVal:{} //搜索条件
}
handlePageChange = (pagination, filters, sorter) => {    
  	let val = {      
	  	rows: defaultPageSize,      
	  	page: pagination.current?pagination.current:1   
  	 }    
  	 this.setState({page:pagination.current?pagination.current:1})
	 this.props.dispatch({      
		  type: 'volunteerList/getList',      
		  payload: {...val ,...this.state.searchVal },   //如果是搜索结果分页,需要加上搜索的值
	   }); 
}

const paginationProps = {            
	pageSize: defaultPageSize,  
	current:this.state.page   
	total: data.total,              //后台读取的total
};
<Table                
 loading={loading}               
 dataSource={data.data}                
 columns={column1}                
 pagination={paginationProps}                
 onChange={this.handlePageChange}              
 />
  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

刘斩仙的笔记本

富贵险中求

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值