ant design pro 分页

因为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，请求时获取就行了。
方式二：

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

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

const paginationProps = {            
	pageSize: defaultPageSize,      
	total: data.total,              //后台读取的total
};
<Table                
 loading={loading}               
 dataSource={data.data}                
 columns={column1}                
 pagination={paginationProps}                
 onChange={this.handlePageChange}              
 />

猜你喜欢