react-开发经验分享-Table表格组件里自定义翻页方法补充

ant框架里，Table表格组件里自定义翻页组件的方法 前面讲过在Table表格组件里自定义翻页组件 补充一下在项目开发中遇到的自定义翻页方法的注意点和自定义翻页组件里的上次漏掉了的几个重要方法 承接上文：

代码语言：javascript复制

// 当表格里有查询、排序功能时
// 表格的翻页功能会受查询数据量变化的影响，会出现查询后自定义翻页组件的页码错误的现象
// 因此，必须对自定义翻页功能做进一步的优化调整

// 使用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, // 页码改变的回调，参数是改变后的页码及每页条数
    }}
/>

ant table 表格 开发 框架

0 人点赞