MUI TablePagination 添加选择页码的功能答案

【问题标题】：MUI TablePagination adding ability to select page numberMUI TablePagination 添加选择页码的功能
【发布时间】：2022-10-15 19:47:29
【问题描述】：

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

用户可以通过下拉列表选择每个给定页面 5、10 或 20 个用户。
根据每页选定的用户数动态显示页数。
但是，我缺少此功能，并且不确定与此组件一起使用什么道具来完成此操作：
1. 用户能够从列出的结果页面数中导航到选定页面。
正如您在中看到的那样，它显示 1-5 of 22，但我想让用户能够选择像这样的页面

这是我的功能代码：
```
<TablePagination
          rowsPerPageOptions={[5, 10, 20]}
          component="div"
          count={showUser.length}
          rowsPerPage={rowsPerPage}
          page={page}
          onPageChange={handleChangePage}
          onRowsPerPageChange={handleChangeRowsPerPage}
/>
```
我想在不删除 1,2 功能的情况下完成此操作。

【问题讨论】：

我认为 TablePagination 组件不可能做到这一点。分页组件是可能的。也许您可以将页面大小与 Pagination 组件分开管理并使用 Pagination 组件而不是 TablePagination？ mui.com/material-ui/react-pagination/#basic-pagination 。即有一个带有页面大小选项的控件，可以根据选择更改绑定的表数据
你能帮我解决这个问题吗？我可以让分页工作，但不确定如何添加页面大小部分。
当然，我会在答案中添加一些示例代码

标签： javascript reactjs material-ui pagination

【解决方案1】：

正如上面 cmets 中提到的，我的建议是使用 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;

【讨论】：

正是我想要的。我能够根据自己的需要进行调整。太感谢了！

【解决方案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>
      </>
    );
  }}
/>

【讨论】：