antd表格分页设置

先引入Table组件

                <Table
                    loading={this.state.loading}
                    columns={this.state.columns}
                    dataSource={this.state.list}
                    className="certificate"
                    pagination={false}     
                />
第一种方式不使用Table组件自带的pagination属性,而是单独引入Pagination组件
                <Pagination
                    defaultCurrent={1}
                    total={this.state.total}
                    hideOnSinglePage={true}
                    className="pagination"
                    onChange={this.onChange.bind(this)}
                />

回调函数,切换页面。

    onChange(page) {
        this.getData(page);
        this.setState({
            loading: true
        })
    }

getData函数是向后端发送请求,参数page是要跳转至页面

第二种方式就是直接使用Table的pagination属性,无需引入Pagination组件
                <Table
                    loading={this.state.loading}
                    columns={this.state.columns}
                    dataSource={this.state.list}
                    className="certificate"
                    pagination={paginationProps}
                />

paginationProps参数:

        const paginationProps = {
            showSizeChanger: false,
            showQuickJumper: false,
            showTotal: () => `共${this.state.total}条`,
            pageSize: this.state.pageSize,
            current: this.state.pageNum,
            total: this.state.total,
            onChange: (current) => this.changePage(current),
        }

回调函数changePage():

    changePage(current){
        this.getData(current) //向后端发送请求
    }

构造函数设置:

    constructor(props) {
        super(props);
        this.state = {
            total: 0,
            loading: true,
            pageNum: 1,
            pageSize: 0
        }
    }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,622评论 0 7
  • 1.小程序起步 (1)点击https://mp.weixin.qq.com/wxopen/waregister?a...
    GXW_Lyon阅读 3,465评论 0 0
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,399评论 0 3
  • 一. Java基础部分.................................................
    wy_sure阅读 3,854评论 0 11
  • 因果真是存在的,不管是今生还是前生。 做人嘛要有担当,欠命还命,欠情还情,欠钱还钱,一味的躲避纠缠不清总是麻烦,还...
    紫狸阅读 400评论 0 0