MUI TablePagination 添加选择页码的功能

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 功能的情况下完成此任务。

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;