先引入Table组件
<Table
loading={this.state.loading}
columns={this.state.columns}
dataSource={this.state.list}
className="certificate"
pagination={false}
/>
第一种方式不使用Table组件自带的pagination属性,而是单独引入Pagination组件
<Pagination
defaultCurrent={1}
total={this.state.total}
hideOnSinglePage={true}
className="pagination"
onChange={this.onChange.bind(this)}
/>
回调函数,切换页面。
onChange(page) {
this.getData(page);
this.setState({
loading: true
})
}
getData函数是向后端发送请求,参数page是要跳转至页面
第二种方式就是直接使用Table的pagination属性,无需引入Pagination组件
<Table
loading={this.state.loading}
columns={this.state.columns}
dataSource={this.state.list}
className="certificate"
pagination={paginationProps}
/>
paginationProps参数:
const paginationProps = {
showSizeChanger: false,
showQuickJumper: false,
showTotal: () => `共${this.state.total}条`,
pageSize: this.state.pageSize,
current: this.state.pageNum,
total: this.state.total,
onChange: (current) => this.changePage(current),
}
回调函数changePage():
changePage(current){
this.getData(current) //向后端发送请求
}
构造函数设置:
constructor(props) {
super(props);
this.state = {
total: 0,
loading: true,
pageNum: 1,
pageSize: 0
}
}