如何使用Material UI表分页显示每页正确的行 [英] How to display correct rows per page using Material UI table pagination

问题描述

我正在尝试使用Material UI表分页来显示每页5行，但是它显示页面上的所有项目，并且不会更改页面.不能找出我犯错的地方.我已经在沙箱中重新创建了我的问题，请您检查一下: https://codesandbox.io/s/magical-davinci-t2nq7

I'm trying to use Material UI table pagination to display 5 rows per page, but it shows all items on page and does not change pages. Cant find out where I'm making mistake. I have recreated my problem in sandbox, could you please check it : https://codesandbox.io/s/magical-davinci-t2nq7

 state = {
    rowsPerPage: 5,
    page: 0
  };

  handleChangePage = (event, page) => {
    this.setState({ page });
  };

  handleChangeRowsPerPage = event => {
    this.setState({ rowsPerPage: event.target.value });
  };


       <TablePagination
        rowsPerPageOptions={[5, 10, 25]}
        component="div"
        count={data.length}
        rowsPerPage={this.state.rowsPerPage}
        page={this.state.page}
        onChangePage={this.handleChangePage}
        onChangeRowsPerPage={this.handleChangeRowsPerPage}
      />

推荐答案

最简单的方法是在从数组渲染之前添加切片方法

The most easiest way is to add slice method before rendering from array

{page,rowsPerPage,} = this.state;

{this.state.tempData.slice(page * rowsPerPage, (page * rowsPerPage) + rowsPerPage).map((rows, idx) => {
            return (
              <TableRow key={idx} hover={true}>
                <TableCell>{rows.name}</TableCell>
                <TableCell>{rows.age}</TableCell>
                <TableCell>{rows.id}</TableCell>
              </TableRow>
            );
          })}

这篇关于如何使用Material UI表分页显示每页正确的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！