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]);

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐