时间戳

首页 > 解决方案 > 如何使用 Material UI 表格分页在每页显示正确的行

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

问题描述

我正在尝试使用 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}
      />

标签： javascriptreactjsmaterial-ui

解决方案

最好使用后端来获取分页数据，因为您可以将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

推荐阅读