Author：Mr.柳上原

• 付出不亞于任何的努力
• 愿我們所有的努力，都不會被生活辜負
• 不忘初心，方得始終

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, // 頁碼改變的回調，參數是改變后的頁碼及每頁條數
    }}
/>