diff --git a/frontend/src/components/tables/PageControl.tsx b/frontend/src/components/tables/PageControl.tsx index 317b4a3c3..e328de7cf 100644 --- a/frontend/src/components/tables/PageControl.tsx +++ b/frontend/src/components/tables/PageControl.tsx @@ -1,5 +1,4 @@ import { FunctionComponent } from "react"; -import { useSearchParams } from "react-router"; import { Group, Pagination, Text } from "@mantine/core"; import { useIsLoading } from "@/contexts"; @@ -23,7 +22,6 @@ const PageControl: FunctionComponent = ({ const end = Math.min(size * (index + 1), total); const isLoading = useIsLoading(); - const [searchParams, setSearchParams] = useSearchParams(); return ( @@ -35,10 +33,6 @@ const PageControl: FunctionComponent = ({ color={isLoading ? "gray" : "primary"} value={index + 1} onChange={(page) => { - searchParams.set("page", page.toString()); - - setSearchParams(searchParams, { replace: true }); - return goto(page - 1); }} hidden={count <= 1} diff --git a/frontend/src/components/tables/QueryPageTable.tsx b/frontend/src/components/tables/QueryPageTable.tsx index 797d7a08e..21889adf7 100644 --- a/frontend/src/components/tables/QueryPageTable.tsx +++ b/frontend/src/components/tables/QueryPageTable.tsx @@ -1,4 +1,5 @@ import { useEffect } from "react"; +import { useSearchParams } from "react-router"; import { UsePaginationQueryResult } from "@/apis/queries/hooks"; import SimpleTable, { SimpleTableProps } from "@/components/tables/SimpleTable"; import { LoadingProvider } from "@/contexts"; @@ -18,6 +19,8 @@ export default function QueryPageTable(props: Props) { controls: { gotoPage }, } = query; + const [searchParams, setSearchParams] = useSearchParams(); + useEffect(() => { ScrollToTop(); }, [page]); @@ -30,7 +33,13 @@ export default function QueryPageTable(props: Props) { index={page} size={pageSize} total={totalCount} - goto={gotoPage} + goto={(page) => { + searchParams.set("page", (page + 1).toString()); + + setSearchParams(searchParams, { replace: true }); + + gotoPage(page); + }} > );