如何在反应中使用antd表中的自定义分页？答案

【问题标题】：how to use custom pagination in antd table in react?如何在反应中使用antd表中的自定义分页？
【发布时间】：2022-02-01 07:00:28
【问题描述】：

我正在使用 antd 表格分页，我想自定义分页。表内的数据将检索 50 条记录/API 调用。表格内的数据将显示10条记录/页。如果系统中有剩余数据但尚未检索，则分页上的下一步按钮将被启用，否则将被禁用。例如。系统有100条记录。第一次 API 调用将获得 50 条最新记录（没有 100 - 50）并将呈现到表中。由于一页将显示 10 条记录，因此它将分为 5 页。用户到达第 5 页后，下一步按钮将可用，因为系统中还有 50 条记录。如果用户单击next，将第二次调用API，并附加表内的数据，总页数为10，因为已检索到所有数据。在第二次 API 调用后，next 按钮将被禁用，用户只能转到最后一页的第 10 页。

建议我一个合适的方法。

<Table
   columns={columns}
   dataSource={tableinfo.data_source}
   pagination={false}
/>

<Pagination 
   total={500} 
   itemRender={itemRender} 
/>

const itemRender = (current, type, originalElement) => {
      if (type === 'prev') {
        return <a>Previous</a>;
      }
      if (type === 'next') {
        return <a>Next</a>;
      }
      return originalElement;
    }

【问题讨论】：

标签： javascript pagination antd

【解决方案1】：

最简单的方法是为pageSize 和pageIndex 定义本地状态。假设您有一个返回元素总命中数的 api，antd pagination 可以处理所描述的按钮行为，而无需对您的代码进行任何额外的更改。

例如：你要获取页面2，页面大小为10，总共有123个元素

{
  results, // Array containing elements 20-30
  hitCount // 123
}

你的代码可能看起来像

const [pageIndex, setPageIndex] = useState(0);
const [pageSize, setPageSize] = useState(10);

const hitCount = <obtained from the api call>

...

<Pagination current={pageIndex} total={hitcount} onChange={(page, size) => {setPageIndex(page); setPageSize(size)}} />

【讨论】：