如何實現 mui-datatable 的服務器端分頁？

Question

如何實現 mui-datatable 的服務器端分頁？

問題：

• 我似乎無法檢索用戶在rowsPerPage options中選擇的任何值。 如果用戶點擊15 ，那么 useEffect 中的這些rowsPerPage useEffect應該被更新：

   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); } };

• 服務器端分頁和過濾器如何用於 mui-datatable？

重新創建的代碼框： https ://codesandbox.io/s/mui-datatable-server-side-pagination-filtering-and-sorting-y8pyp7?file=/src/App.js:611-1091

Answer 1

很明顯，在您的代碼中的沙箱中，您有狀態

const [rowsPerPage, setRowsPerPage] = useState(10);

IDE 下划線setRowsPerPage向您顯示它從未使用過，因此即使用戶更改了值，狀態也不會更新。

文檔顯示有onChangeRowsPerPage ，您可以將回調傳遞給它以更新狀態，然后使用狀態的值發送到后端

Answer 2

我從（來自官方示例）中找到了示例： 單擊此處

它有很好的例子如何處理分頁

邏輯是：

你應該有處理 pageSize 的 pageSize 狀態

onPageSize 改變更新 pageSize 狀態