antd table 分页

4个步骤实现table的分页

table 参数设置

  state = {
    pagination: { pageSize: 10 },
  };
 <Table       rowKey={e => e.id} 
 					dataSource={this.state.list}
                   columns={columns}
                   pagination={{ ...this.state.pagination, showSizeChanger: true, showQuickJumper: true }}
                   onChange={this.onTableChange}
            />

点击按钮

  onTableChange = (pagination, filters, sorter) => {
    this.loadData(pagination);
  };

调用事件

loadData = (pagination) => {
    let { current: page, pageSize } = pagination ? pagination : this.state.pagination;
    search(this.state.filter, page, pageSize)
      .then(res => {
        let pagination = {
          ...this.state.pagination,
          pageSize,
          total: res.page && res.page.count ? res.page.count : 0,
          current: page,
        };
        this.setState({ list: res.data, pagination, });
      })
      .catch(e => {
        parse_error(e);
      });
  };

支持分页的接口

export  function search(filter,page,size) {
  let url = '';
  return requestJson(url,{
    method: 'GET',
    data: {...filter,page,size}
  })
}