MUI表格分页添加选择页面编号的功能。

Question

我正在使用MUI TablePagination在我的表格中创建分页。代码运行良好，我获得了大部分我想要的功能：

1. 允许用户通过下拉菜单选择每个页面显示的5、10或20个用户。
2. 根据所选每页用户数动态显示页面数。

然而，我缺少这个功能，我不确定要使用哪个属性来完成此操作：

3. 允许用户从列出的结果页数中导航到所选页面。

如您在 中所看到的，它显示了22个结果中的1-5个，但我想给用户提供像 中那样选择页面的能力。

以下是我的函数代码：

<TablePagination
          rowsPerPageOptions={[5, 10, 20]}
          component="div"
          count={showUser.length}
          rowsPerPage={rowsPerPage}
          page={page}
          onPageChange={handleChangePage}
          onRowsPerPageChange={handleChangeRowsPerPage}
/>

我想在不删除1、2功能的情况下完成此操作。

- alcol92

---

我认为使用TablePagination组件不可能实现这一点。 但是，使用Pagination组件是可以实现的。 也许您可以将页面大小控件与Pagination组件分开管理，并使用Pagination组件代替TablePagination？ https://mui.com/material-ui/react-pagination/#basic-pagination 。例如，创建一个带有页面大小选项的控件，根据选择更改绑定表数据。 - sneaky squid

你能帮我解决这个问题吗？我可以让分页正常工作，但不确定如何添加页面大小部分。 - alcol92

当然，我会在答案中放一些示例代码。 - sneaky squid

Answer 1

如上方评论所述，我的建议是使用 Pagination 组件而不是 TablePagination 组件。

这需要您自己处理页面大小。

以下代码应该可以帮助您实现此功能，并使其适应您的需求:

const Demo = () => {
  const data = [
    "one",
    "two",
    "three",
    "four",
    "five",
    "six",
    "seven",
    "eight",
    "nine",
    "ten",
  ];

  const [pageSize, setPageSize] = useState(2);
  const [page, setPage] = useState(1);

  const handlePage = (page) => setPage(page);

  const handlePageSizeChange = (event) => {
    setPageSize(event.target.value);
  };

  const totalPages = Math.ceil(data.length / pageSize);

  const pageContent = data.slice((page - 1) * pageSize, page * pageSize);

  return (
    <>
      <ul>
        {pageContent.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
      <select name="page-size" id="page-size" onChange={handlePageSizeChange}>
        <option value={2}>2</option>
        <option value={4}>4</option>
        <option value={6}>6</option>
        <option value={8}>8</option>
        <option value={10}>10</option>
      </select>
      <Pagination
        color="primary"
        count={totalPages}
        onChange={(event, value) => handlePage(value)}
        page={page}
        size="large"
      ></Pagination>
    </>
  );
};

export default Demo;

- sneaky squid

---

正是我所需要的。我能够根据我的需求进行调整。非常感谢！ - alcol92

Answer 2

您可以使用 TablePagination 组件而不是仅使用 Pagination 组件。此外，您可以通过使用 ActionsComponent 属性自定义分页 UI 组件。 https://mui.com/material-ui/api/table-pagination/。这里我将发布一个示例来用下拉列表替换分页。

<TablePagination
  rowsPerPageOptions={[10, 20, 50]}
  count={1000}
  rowsPerPage={10}
  page={pageNo}
  onPageChange={handlePageChange}
  ActionsComponent={(subProps: any) => {
    const {
      page,
      count,
      rowsPerPage,
      backIconButtonProps,
      nextIconButtonProps,
      showLastButton,
      getItemAriaLabel,
      showFirstButton,
      onPageChange,
      ...restSubProps
    } = subProps;
    return (
      <>
        <Select
          size="small"
          onChange={(e: any) => handlePageChange(e, e.target.value)}
          value={pageNo}
          MenuProps={{
            PaperProps: { sx: { maxHeight: 360 } }
          }}
          >
          <MenuItem id={1} key={1} value={1}>{1}</MenuItem>
          <MenuItem id={2} key={2} value={2}>{2}</MenuItem>
          <MenuItem id={3} key={3} value={3}>{3}</MenuItem>
         </Select>
      </>
    );
  }}
/>

- Mahesh Suranga

---

表格分页仍然没有提供直接跳转到指定页面的功能。我们需要自定义自己的分页。我已经实现了上述功能。它可以工作，但是没有提供直接跳转到指定页面的功能。 - Sandeep Jain