Estoy usando la paginación de tablas antd y quiero personalizar la paginación. Los datos dentro de la tabla se recuperarán 50 registros/llamada API. Los datos dentro de la tabla se mostrarán 10 registros/página. El siguiente botón de paginación se habilitará si quedan datos en el sistema pero aún no se han recuperado, y se deshabilitará de lo contrario. Por ejemplo, hay 100 registros en el sistema. La primera llamada API obtendrá 50 registros más recientes (no 100 - 50) y se representará en la tabla. Dado que una página mostrará 10 registros, estará en 5 páginas. Después de que el usuario llegó a la página 5, el siguiente botón estará disponible porque quedan 50 registros en el sistema. Si el usuario hace clic en el siguiente, se llamará a la API por segunda vez y se agregarán los datos dentro de la tabla y la página total será 10 porque se recuperaron todos los datos. el siguiente botón se deshabilitará después de la segunda llamada a la API y el usuario solo podrá ir a la página 10 para la última página.
sugerirme un enfoque adecuado.
<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; }La forma más sencilla es definir estados locales para pageSize y pageIndex . Suponiendo que tiene una API que devuelve el recuento total de elementos, la paginación antd puede manejar el comportamiento del botón descrito sin ningún cambio adicional en su código.
Por ejemplo: desea obtener la página 2 con un tamaño de página de 10 y hay 123 elementos en total
{ results, // Array containing elements 20-30 hitCount // 123 }Su código podría verse como
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)}} />