如何在反應中使用antd表中的自定義分頁？

Question

我正在使用 antd 表格分頁，我想自定義分頁。 表內的數據將檢索 50 條記錄/API 調用。 表格內的數據將顯示10條記錄/頁。 如果系統中有剩余數據但尚未檢索，則分頁上的下一步按鈕將被啟用，否則將被禁用。 例如，系統中有 100 條記錄。 第一個 API 調用將獲得 50 條最新記錄（沒有 100 - 50）並將呈現到表中。 由於一頁將顯示 10 條記錄，因此它將分為 5 頁。 用戶到達第 5 頁后，下一步按鈕將可用，因為系統中還有 50 條記錄。 如果用戶單擊下一步，將第二次調用 API 並附加表內的數據，總頁數將為 10，因為已檢索到所有數據。 在第二次 API 調用后，下一步按鈕將被禁用，用戶只能將 go 轉到第 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;
    }

Answer 1

最簡單的方法是為pageSize和pageIndex定義本地狀態。 假設您有一個 api ，它返回元素的總命中數， antd 分頁可以處理所描述的按鈕行為，而無需對您的代碼進行任何額外的更改。

例如：您要獲取頁面大小為10的第2頁，總共有 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)}} />