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
        }
    }