37 lines
1.3 KiB
TypeScript
37 lines
1.3 KiB
TypeScript
import { Pagination } from "antd";
|
|
import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
|
|
|
|
export const PaginationBody = ({ data }: any) => {
|
|
console.log(data , "ibrahimmmmmmmmm");
|
|
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const pagination = location?.search || '';
|
|
const currentPage = parseInt(new URLSearchParams(location.search).get("page") || "1", 10);
|
|
const pageSize = parseInt(new URLSearchParams(location.search).get("per_page") || "8", 10);
|
|
|
|
const [searchParams] = useSearchParams()
|
|
const onChange = (page: number, pageSize?: number) => {
|
|
navigate(`?page=${page}&per_page=${pageSize || data?.per_page}&search=${searchParams.get('search')}`, { replace: true });
|
|
};
|
|
|
|
const onShowSizeChange = (current: number, pageSize: number) => {
|
|
navigate(`?page=${current}&per_page=${pageSize}&search=${searchParams.get('search')}`, { replace: true });
|
|
};
|
|
|
|
|
|
return (
|
|
<Pagination
|
|
className='text-center mt-3 paginateStyle'
|
|
total={data}
|
|
showTotal={(total: any) => `Total ${total} items`}
|
|
pageSize={pageSize}
|
|
pageSizeOptions={[8, 16, 24, 32, 40]}
|
|
defaultCurrent={currentPage}
|
|
current={currentPage} // Adding this line will set the current page correctly
|
|
onChange={onChange}
|
|
onShowSizeChange={onShowSizeChange}
|
|
/>
|
|
);
|
|
};
|