专栏首页菜鸟前端工程师react-开发经验分享-Table表格组件里自定义翻页方法补充

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

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

    Mr. 柳上原
  • html+css学习笔记009-定位

    Mr. 柳上原
  • JavaScript学习笔记018-面向对象编程思维0构造函数0Class

    Mr. 柳上原
  • Laravel源码解析之用户认证系统(一)

    使用过Laravel的开发者都知道,Laravel自带了一个认证系统来提供基本的用户注册、登录、认证、找回密码,如果Auth系统里提供的基础功能不满足需求还可以...

    KevinYan
  • CES消费科技2017预测:在这,中国是发达国家(50页PPT)

    1. 消费电子产品种类繁多,CTA调研跟踪的产品大致为100种(下边图表有分类)。

    华章科技
  • Django Pagination 完善分页

    在 Django Pagination 简单分页 中,我们实现了一个简单的分页导航效果。但效果有点差强人意,我们只能点上一页和下一页的按钮进行翻页。比较完善的分...

    追梦人物
  • Android版本名称及API版本对应表

    wxdut.com
  • Google I/O 2018前瞻丨WebAR或将亮相,Android P将更注重隐私

    VRPinea
  • 谷歌I/O大会前瞻:Android P将更注重隐私,Wear OS智能手表更新

    Google I/O 2018,于北京时间今日凌晨在美国加州山景城举行。这场大会上,我们将看到谷歌在AI、AR/VR以及Android方面的诸多最新动作。接下来...

    VRPinea
  • Debian9 ifconfig命令找不到解决办法

    原文链接:https://www.cnblogs.com/pipci/p/9634060.html

    周小董

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动