react-开发经验分享-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, // 页码改变的回调，参数是改变后的页码及每页条数
    }}
/>