React Material UI 中的分页

Question

我想根据数组的长度进行分页。现在，数组的长度是 2。所以总页数应该是 2。我想根据每个数组逐页显示它们。我该怎么做？

预期输出如下：

For page 1, it should display Robert Baker and its classification
For page 2, it should display John Jones, James Thomas and Lester Win and their classification

     <Paper className={classes.paper}>
        <TableContainer>
          <Table
            className={classes.table}
            aria-labelledby="tableTitle"
            aria-label="enhanced table"
          >
            <TableBody>
              {payload?.data?.map((data, index) => {
                return (
                  <TableRow hover key={index}>
                    <TableCell align="right">{data.fullname}</TableCell>
                    <TableCell align="right">{data.classification}</TableCell>
                  </TableRow>
                );
              })}
            </TableBody>
          </Table>
        </TableContainer>
        <TablePagination
          rowsPerPageOptions={[5, 10, 25]}
          component="div"
          count={payload.length}
          rowsPerPage={1}
          page={page}
          onPageChange={handleChangePage}
        />
      </Paper>

Answer 1

分页通常通过对平面数据数组进行分块（即分页）来实现。根据您的描述，听起来更像是您希望 payload 的每个数组元素都成为一个呈现 table 分页条目的“页面”。换句话说，对于第 1 页，它呈现一个呈现 table 的页面，其中包含来自 first 元素的所有数据 payload.data，然后对于第 2 页，它呈现一个呈现 table 的页面，其中包含来自 second 元素的所有数据payload.data.

为此，您需要两个分页组件，一个用于 payload.data 的页面，第二个用于 that 数据中的页面。

示例：

import {
  Paper,
  Table,
  TableBody,
  TableFooter,
  TableCell,
  TableContainer,
  TablePagination,
  TableRow
} from "@material-ui/core";
import { Pagination } from "@material-ui/lab";

export default function EnhancedTable() {
  const classes = useStyles();

  // state for payload.data index
  const [dataPage, setDataPage] = useState(0);

  // state for paginated table data
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(5);

  // when payload.data updates, reset table page
  useEffect(() => {
    setPage(0);
  }, [dataPage]);

  const onDataPageChange = (event, page) => setDataPage(page - 1);

  const handleChangePage = (event, newPage) => setPage(newPage);

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(parseInt(event.target.value, 10));
    setPage(0);
  };

  return (
    <div className={classes.root}>
      <Paper className={classes.paper}>
        <TableContainer>
          <Table
            className={classes.table}
            aria-labelledby="tableTitle"
            aria-label="enhanced table"
          >
            <TableBody>
              {/* select payload.data index */}
              {payload.data[dataPage]
                {/* paginate data */}
                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                .map((data) => (
                  <TableRow hover key={data.id}>
                    <TableCell align="right">{data.full_name}</TableCell>
                    <TableCell align="right">{data.classification}</TableCell>
                  </TableRow>
                ))}
            </TableBody>
            <TableFooter>
              <TableRow>
                <TablePagination
                  rowsPerPageOptions={[5, 10, 25, 50, 100]}
                  component="div"
                  count={payload.data[dataPage].length}
                  rowsPerPage={rowsPerPage}
                  page={page}
                  onPageChange={handleChangePage}
                  onRowsPerPageChange={handleChangeRowsPerPage}
                />
              </TableRow>
            </TableFooter>
          </Table>
        </TableContainer>
      </Paper>
      <Pagination
        count={payload.data.length}
        onChange={onDataPageChange}
        page={dataPage + 1}
      />
    </div>
  );
}

React Material UI 中的分页

Pagination in Material UI in React

ecmascript-6

reactjs

material-ui

react-hooks