关于react的分页

基于antdesign分页：
表格属性pagination
<Table
pagination={{
total: this.state.totalNum,
showSizeChanger: true,
showQuickJumper: true,
pageSizeOptions: [‘10‘,‘20‘,‘50‘],
defaultPageSize: this.state.pageSize,
showTotal: total => {
return `共${total}条`;
},
}}
onChange={this.onTableChange}
/>

在 state里面声明
this.state = {
pageSize: 20,// 表格size
pageNo: 1,// 表格页数
totalNum: null,// 表格数据总数
};
进入页面的时候获取到关于分页的数据
componentWillMount() {
this.getData();
}
// 获得数据
getData = () => {
this.setState({loading: true});
promiseAjax.post(‘tp/summaryGroups/page‘,{
pageSize: this.state.pageSize,
pageNo: this.state.pageNo,
orders: {
beginDate: ‘desc‘,
},// orders排列顺序
}).then(res => {
if (res.code === ‘0‘) {
this.setState({
data: res.data.data,
pageSize: res.data.pageSize,
pageNo: res.data.pageNo,
totalNum: res.data.totalNum,
});
}
}

// 表格变动 onTableChange = (pagination) => { this.setState({ pageSize: pagination.pageSize,pageNo: pagination.current,},() => { this.getData(); }); }注意??在table里面onChange事件的位置，如果pagination作为 table的属性来写那么onChange写在pagination的外面，如上。如果pagination作为单独的组件，onChange事件则需要写在pagination的里面，可以参考antdesign的分页组件的API