因为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}
/>