react-開發經驗分享-Table表格元件裡自定義翻頁方法補充
摘要：
ant框架裡，Table表格元件裡自定義翻頁元件的方法
前面講過在Table表格元件裡自定義翻頁元件
補充一下在專案開發中遇到的自定義翻頁方法的注意點和自定義翻頁元件裡的上次漏掉了的幾個重要方法
承接上文：
// 當表格裡有查詢、排...
ant框架裡，Table表格元件裡自定義翻頁元件的方法
前面講過在Table表格元件裡自定義翻頁元件
補充一下在專案開發中遇到的自定義翻頁方法的注意點和自定義翻頁元件裡的上次漏掉了的幾個重要方法
承接上文：
// 當表格裡有查詢、排序功能時
// 表格的翻頁功能會受查詢資料量變化的影響，會出現查詢後自定義翻頁元件的頁碼錯誤的現象
// 因此，必須對自定義翻頁功能做進一步的優化調整
// 使用state來儲存後端資料並動態更新
this.state = {
current: 1, // 當前頁數控制
}
// 篩選資料後，讓預設頁碼回覆到初始最前頁
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
// 本地資料篩選
........
// 非同步資料篩選
...........
this.setState({
.................
pageIndex: 0,
current: 1,
}, () => {this.initialData()})
}
})
}
// 頁碼改變時
onShowIndexChange = (pageIndex, pageSize) => {
console.log(pageIndex, pageSize, '頁碼改變時');
let newPageIndex = pageIndex - 1;
this.setState({
pageIndex: newPageIndex,
pageSize,
current: pageIndex, // 控制當前頁碼為改變後的頁碼
}, () => {this.initialData()})
}
// 每頁顯示資料量改變時
onShowSizeChange = (pageIndex, pageSize) => {
console.log(pageIndex - 1, pageSize, '每頁顯示資料量改變時');
let newPageIndex = pageIndex - 1;
this.setState({
pageIndex: newPageIndex,
pageSize,
}, () => {this.initialData()})
}
// render裡展現前端的樣式
<Form onSubmit={this.handleSubmit}>
..........................
<Button icon='search' type='primary' htmlType='submit' style={{marginLeft: 18, marginRight: 12}}>查詢</Button>
</Form>
<Table
columns={this.columns}
dataSource={ProjectData}
rowSelection={rowSelection}
scroll={{x: 2500}}
bordered={true}
pagination={{
showSizeChanger: true, // 是否允許快速跳轉至某頁
showQuickJumper: true, // 是否允許改變 pageSize
pageSize: pageSize, //每頁顯示資料數量
pageSizeOptions: ['20', '50', '100'], // 可選的每頁顯示資料數量
total: numberData, // 總資料數量
showTotal: this.onshouTotal, // 展示前端頁面的總資料量樣式
current: current, // 當前頁碼控制
onShowSizeChange: this.onShowSizeChange, // pageSize 變化的回撥
onChange: this.onShowIndexChange, // 頁碼改變的回撥，引數是改變後的頁碼及每頁條數
}}
/>