I am trying to add pagination on my table (ant design table component) using react query to fetch data but sometimes it works when going from page 1 to page 2 but when reaching the last page or changing the page size it doesn't work properly and i don't know why. This is the result . Here's my code.
const [pagination, setPagination] = useState({
current: 1,
pageSize: 10,
}); //pagination state
const fetchWaitlist = (page, pageSize) => {
return axios.get(API_URL + `tickets/waitlist?page=${page}&pageSize=${pageSize}&source=` + defaultAgency)
} //fetcher function
const {data: waitlist, refetch: refecthWaitList, isLoading} = useQuery(["waitlist", pagination.current, pagination.pageSize], () => fetchWaitlist(pagination.current, pagination.pageSize), {
onSuccess: (data) => {
setFilteredData(data?.data.content);
setPagination({
...pagination, total: data?.data.totalElements
}); // useQuery Hook
useEffect(() => {
setFilteredUserData(users?.data.content);
}, [users]); //state to perform search over the table
{!isLoading ? <Table
components={components}//Add new Custom Cell and Row
pagination={{
...pagination, showSizeChanger: true, onChange: (page, pageSize) => {
setPagination({current: page, pageSize: pageSize})
}
}}
columns={columns} rowClassName="waitlist-table_row--shadow" rowSelection={rowSelection} rowKey="id"
dataSource={filteredData} className="all-tickets_table" scroll={{x: "true"}}/> : <CustomLoader/>} //Table component
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.