带Mui-Datatable分页和排序的Firebase分页

Question

如何使用的服务器端分页和筛选来显示数据？到目前为止，我还没有使它发挥作用。这些是我做过的代码。

我还遇到了一个问题，在这个问题中，所有的消防局数据都是被获取的，而不仅仅是10个数据。10来自rowsPerPage。

重新创建的代码框：https://codesandbox.io/s/mui-datatable-server-side-pagination-filtering-and-sorting-y8pyp7

export default function App() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(false);
  const [count, setCount] = useState(1);
  const [rowsPerPage, setRowsPerPage] = useState(10);

  useEffect(() => {
    let isMounted = true;

    const getUsers = async () => {
      const querySnapshot = await getDocs(
        collection(db, "users"),
        orderBy("firstName", "asc"),
        limit(rowsPerPage)
      );
      const arr = [];
      querySnapshot.forEach((doc) => {
        arr.push({
          ...doc.data()
        });
      });
      if (isMounted) {
        setUsers(arr);
        setCount(arr.length);
        loading(true);
      }
    };

    getUsers().catch((err) => {
      if (!isMounted) return;
      console.error("failed to fetch data", err);
    });

    return () => {
      isMounted = false;
    };
  }, []);

  const columns = [
    {
      name: "firstName",
      label: "First Name",
      options: {
        filter: false,
        display: true
      }
    },
    {
      name: "lastName",
      label: "Last Name",
      options: {
        filter: false,
        display: true
      }
    },

    {
      name: "number",
      label: "Number",
      options: {
        filter: false,
        sort: true
      }
    }
  ];

  console.log(rowsPerPage, "rowsPaerPage");
  console.log(users, "users");

  const options = {
    print: true,
    filterType: "multiselect",
    selectableRows: "none",
    responsive: "standard",
    fixedHeader: true,
    count: count,
    rowsPerPage: rowsPerPage,
    serverSide: true
  };

  return (
    <div className="App">
      <ThemeProvider theme={createTheme()}>
        <MUIDataTable
          title={"Reports"}
          options={options}
          columns={columns}
          data={users}
        />
      </ThemeProvider>
    </div>
  );
}

Answer 1

当您想要使用query()和orderBy()方法时，应该使用orderBy()方法。见下面的代码：

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

有关更多信息，您可以查看以下文档：

• 顺序和限制数据
• 执行查询