如何实现多数据表的服务器端分页?

Question

如何实现多数据表的服务器端分页?

问题:

• 我似乎无法检索用户在rowsPerPage options中选择的任何值。如果用户单击15，那么useEffect中的这些rowsPerPage也应该更新:

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

• 服务器端分页和过滤器如何为多数据表工作?

重新创建的codesandbox: 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状态