I am using antd table pagination and i want to custom the pagination. Data inside table will be retrieved 50 records/API call. Data inside table will be displayed 10 records/page. next button on pagination will be enabled if there are remaining data in the system but not being retrieved yet, and will be disabled otherwise. E.g. there are 100 records in system. First API call will get 50 latest records (no 100 – 50) and will be rendered into the table. Since one page will display 10 records, it will be in 5 pages. After user arrived in page 5, the next button will be available because there are remaining 50 records in the system. If user click the next, API will be called for the second time and data inside the table will appended and total page will be 10 because, all of data has been retrieved. next button will disabled after the second API call and user only able to go to page 10 for the last page.
suggest me a suitable approach.
<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;
}
The easiest way is to define local states for pageSize and pageIndex.
Assuming that you have an api that returns the total hit count of elements the antd pagination can handle the described button behavior without any additional changes to your code.
For example: you want to fetch page 2 with a page size of 10 and there are 123 elements in total
{
results, // Array containing elements 20-30
hitCount // 123
}
Your code could look like
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)}} />