如何使用 Material UI 表格分页在每页显示正确的行

Posted 2023-02-22

【中文标题】如何使用 Material UI 表格分页在每页显示正确的行

【英文标题】：How to display correct rows per page using Material UI table pagination

【发布时间】：2020-06-03 05:35:33

【问题描述】：

我正在尝试使用 Material UI 表格分页来每页显示 5 行，但它会显示页面上的所有项目并且不会更改页面。无法找出我在哪里犯错。我已经在沙盒中重现了我的问题，请您检查一下：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
      />

【问题讨论】：

首先你要明白TablePagination是一个显示分页格式并触发相应事件或函数返回给你的组件，它不会更新你的表格。所以根据数据。您需要更新数据。网址供您参考：stackblitz.com/edit/fycwiu?file=demo.js

【参考方案1】：

最好使用后端来获取分页数据，因为您可以将 Offset 、 Limit 传递给 API 并从中获取数据，但现在我只是像这样解决您的问题：

import React,  Component  from "react";
import data from "./data.js";
import "./styles.css";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import TablePagination from "@material-ui/core/TablePagination";
import Paper from "@material-ui/core/Paper";

class App extends Component 
  state = 
    rowsPerPage: 5,
    page: 0,
    Offset: 0,
    tempData: []
  ;

  componentDidMount() 
    this.getData();
  

  handleChangePage = (event, page) => 
    let  rowsPerPage, page: currentPage  = this.state;
    if (currentPage < page) 
      return this.setState(
        prevState => 
          return 
            Offset: prevState.Offset + rowsPerPage,
            page
          ;
        ,
        () => this.getData()
      );
     else 
      return this.setState(
        prevState => 
          return 
            Offset: prevState.Offset - rowsPerPage,
            page
          ;
        ,
        () => this.getData()
      );
    
  ;

  handleChangeRowsPerPage = event => 
    this.setState( rowsPerPage: event.target.value  , () => this.getData());
  ;

  getData = () => 
    let  Offset, rowsPerPage: Limit  = this.state;
    let tempArr = [];
    for (let i = Offset; i < Offset + Limit; i++) 
      tempArr.push(data[i]);
    

    return this.setState( tempData: tempArr );
  ;

  render() 
    console.log(this.state);
    return (
      <div className="App">
        <TableContainer component=Paper elevation=0>
          <Table aria-label="simple table">
            <TableHead>
              <TableRow>
                <TableCell>Name</TableCell>
                <TableCell>Age</TableCell>
                <TableCell>ID</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              this.state.tempData.map((rows, idx) => 
                return (
                  <TableRow key=idx hover=true>
                    <TableCell>rows.name</TableCell>
                    <TableCell>rows.age</TableCell>
                    <TableCell>rows.id</TableCell>
                  </TableRow>
                );
              )
            </TableBody>
          </Table>

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


export default App;

通过这种方式，您将 Offset 、 Limit 传递给您的 get data 方法，它会为您呈现过滤后的数据

但你可以从这里看到演示：https://codesandbox.io/s/friendly-williams-xxjf7

【参考方案2】：

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

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>
            );
          )