Reactjs 仅react material 表前端分页

发布于07月24日

我有MUI 4和做表格分页.我从API收到的所有数据都没有分页，只有大约50项，因此它将是小型前端分页.有什么简单的输入来设置这个表的属性吗？我试着在网上复制示例，但是它们用于复杂的后端分页.不确定，对于(a)rowsPerPage(b)page或(c)onChangePage，我应该有什么.我的桌子没有任何特效.

  <TablePagination
    rowsPerPageOptions={[10, 25, 100]}
    count={appointmentList.length}
    rowsPerPage={10} // I want 10 to be default value from 10,25,100
    page={5}
    onChangePage={(_, p) => console.log('hello')}
  />

推荐答案

您可以创建一个用于处理page的state和一个用于处理页面更改的函数，如下所示:

import React from 'react';
import TablePagination from '@material-ui/core/TablePagination';

export default function TablePaginationDemo() {
  const [page, setPage] = React.useState(2);
  const [rowsPerPage, setRowsPerPage] = React.useState(10);

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

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

  return (
    <TablePagination
      component="div"
      count={100}
      page={page}
      onPageChange={handleChangePage}
      rowsPerPage={rowsPerPage}
      onRowsPerPageChange={handleChangeRowsPerPage}
    />
  );
}