¿Cómo puedo implementar la paginación del lado del servidor de mui-datatable?
Problemas:
Parece que no puedo recuperar el valor seleccionado por el usuario en las rowsPerPage options de filas por página. Si el usuario hace clic en 15 , estas filas por página dentro de rowsPerPage useEffect deben actualizarse:
const getUsers = async () => { const usersRef = collection(db, "users"); const q = query( usersRef, orderBy("firstName", "asc"), limit(rowsPerPage) ); const querySnapshot = await getDocs(q); const arr = []; querySnapshot.forEach((doc) => { arr.push({ ...doc.data() }); }); if (isMounted) { setUsers(arr); setCount(arr.length); loading(true); } };¿Cómo funciona la paginación y el filtro del lado del servidor para mui-datatable?
Codesandbox recreado: https://codesandbox.io/s/mui-datatable-server-side-pagination-filtering-and-sorting-y8pyp7?file=/src/App.js:611-1091
Es bastante obvio que en la zona de pruebas de su código tiene estado
const [rowsPerPage, setRowsPerPage] = useState(10); y el IDE subraya setRowsPerPage y le muestra que nunca se usa, por lo que incluso si el usuario cambia el valor, el estado no se actualiza.
Los documentos muestran que hay onChangeRowsPerPage al que puede pasar una devolución de llamada para actualizar el estado y luego usar el valor del estado para enviarlo al backend
Encontré ejemplos de (es de ejemplos oficiales): haga clic aquí
tiene un buen ejemplo de cómo manejar la paginación
la logica es:
debe tener el estado de tamaño de página que maneja el tamaño de página
onPageSize cambiar actualizar estado de tamaño de página