關於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