MUI TablePagination 添加能力到 select 頁碼

Question

我正在使用 MUI TablePagination 在我的表中創建分頁。 代碼運行良好，我得到了我正在尋找的大部分功能：

1. 用戶能夠通過下拉菜單訪問 select，每個給定頁面有 5、10 或 20 個用戶。
2. 根據每頁選擇的用戶數動態顯示頁數。

但是，我缺少此功能，而且我不確定該組件使用什么道具來實現此目的：

3. 用戶能夠從列出的結果頁面數量導航到選定頁面。

如您所見 它顯示 1-5 of 22，但我想讓用戶能夠像這樣訪問 select 頁面

這是我的功能代碼：

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

我想在不刪除 1,2 功能的情況下完成此操作。

Answer 1

您可以使用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>
      </>
    );
  }}
/>

Answer 2

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