Как отображать правильные строки на странице, используя нумерацию таблиц пользовательского интерфейса материала

Question

Я пытаюсь использовать нумерацию таблиц пользовательского интерфейса для отображения 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}
      />

Answer 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

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