antd-table-分页

1.对pagination参数进行设置

const paginationProps = {
    current: pageNum, //当前页码
    pageSize, // 每页数据条数
    // showTotal: () => (
    //   <span>总共{total}项</span>
    // ),
    total, // 总条数
    onChange: page => handlePageChange(page), //改变页码的函数
    hideOnSinglePage: false,
    showSizeChanger: false,
  };

2.table组件的属性配置（分页的话，我们只需关注pagination这个属性就OK了）

 <Table columns={columns} dataSource={datalist} pagination={paginationProps} />

3.改变页数的回调函数

 // 改变页码的回调 page代表页码数 pageSize代表每页条数
  const handlePageChange = (page) => {
    queryPersonalScenceList(page, pageSize);
  };

注意：当分页接口调用成功后，分页接口返回的列表数据应及时的更新给table数据（例如该例子中就是要更新datalist数据，可以将datalist保存在state中，当页面接口调用成功后就setDatalist(datalist)。）。我这里使用redux-saga调用的接口，更新数据这一操作，我在saga里做了处理，所以代码中没能体现出来。

table数据的话，就要在页面初始化的时时候调用，如果你用的是function组件就可以在useEffect里调用接口。代码如下：

useEffect(() => {
// 初始化的时候，我们默认请求第一页的数据
     queryPersonalScenceList(1, pageSize);
  }, [queryPersonalScenceList]);