Intentando hacer que los filtros persistan al cambiar de página (lado del servidor)

Answer

1. 

   davy.ai

   June 14, 2023 at 2:33 pm

   Para hacer que el filtro persista al cambiar de página, debe modificar la función onChange de paginación en el ChildComponent. En lugar de volver a obtener todos los datos, debe obtener los datos filtrados con los parámetros de filtro y valores de paginación seleccionados (página y tamaño de página).

   Puede almacenar los parámetros de filtro en el estado de ParentComponent y pasárselos a ChildComponent como props. Aquí hay un fragmento de código actualizado con las modificaciones:
   “ `
   const ParentComponent = () => {
   const [values, setValues] = useState([]);
   const [pageCount, setPageCount] = useState([]);
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(7);
   const [filterParams, setFilterParams] = useState({});

   useEffect(() => {
   const getValues = () => {
   const limit = pageSize * (page – 1);
   setLoading(true);
   const filterString = Object.keys(filterParams)
   .map((key) => ${key}=${filterParams[key]})
   .join(‘&’);
   const apiURL = `http://localhost:3000/api/v1/elements?skip=${limit}&take=${pageSize}&${filterString}`;
   axios
   .get(apiURL)
   .then((res) => {
   console.log(‘firstRender’, res.data.data);
   setValues(res.data.data);
   setPageCount(res.data.count);
   })
   .catch(errorHandling)
   .finally(() => {
   setLoading(false);
   });
   };
   getValues();
   }, [page, filterParams, pageSize]);

   const handleFilterParams = (newParams) => {
   setPage(1); // reset page to the first page when filter params change
   setFilterParams(newParams);
   };

   // otros funciones y código JSX
   };

   const ChildComponent = (props) => {
   const {
   allthepropsfromtheParentComponent,
   filterParams,
   handlePageSize,
   handlePageCount,
   handleCurrentPage,
   handleValue,
   page,
   pageSize,
   pageCount,
   } = props;

   const handleTableChange = (pagination, _, sorter) => {
   const { current, pageSize } = pagination;
   handlePageSize(pageSize);
   handleCurrentPage(current);
   if (sorter?.field) {
   const sortOrder = sorter.order === ‘ascend’ ? ‘asc’ : ‘desc’;
   handleSort(${sorter.field} ${sortOrder});
   }
   };

   const columns = [/* table columns */];

   return (
   <>

   {
   const newParams = { …filterParams, skip: (currentPage – 1) * pageSize, take: pageSize };
   axios
   .get(‘http://localhost:3000/api/v1/elements’, { params: newParams })
   .then((res) => {
   handlePageCount(res.data.count);
   handleCurrentPage(currentPage);
   handleValue(res.data.data);
   })
   .catch((err) => console.log(err));
   },
   }}
   size=”middle”
   onChange={handleTableChange}
   />

   );
   };
   “ `

   En ParentComponent, se agregó una nueva variable de estado filterParams para almacenar los parámetros de filtro. También se modificó la función de devolución de llamada useEffect para obtener los datos utilizando los parámetros de filtro en la cadena de consulta de URL. La función handleFilterParams se pasa a ChildComponent para actualizar los parámetros de filtro cuando se envía la entrada de filtro en la etiqueta Input.

   En ChildComponent, se agregó un parámetro filterParams a la lista de props y se pasó a la función axios.get para obtener datos filtrados. Se modificó la función onChange en el objeto de paginación para usar los parámetros de filtro y los valores de paginación para obtener solo los datos filtrados. También se agregó una nueva función handleTableChange para manejar los cambios en las columnas de la tabla (ordenamiento, etc.) y se agregó al componente Table como la prop onChange.

Comments are closed.