javascript - How to display correct rows per page using Material UI table pagination - Stack Overflow

admin管理员组

文章数量:1349176

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 :

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

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

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


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

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]}
        ponent="div"
        count={data.length}
        rowsPerPage={this.state.rowsPerPage}
        page={this.state.page}
        onChangePage={this.handleChangePage}
        onChangeRowsPerPage={this.handleChangeRowsPerPage}
      />

• javascript
• reactjs
• material-ui

Share Improve this question Follow edited Feb 20, 2020 at 4:41 Yerlan Yeszhanov asked Feb 19, 2020 at 5:39 Yerlan YeszhanovYerlan Yeszhanov 2,4491313 gold badges4242 silver badges7878 bronze badges 1

• First you have to understand that TablePagination is a ponent to show the pagination format and trigger the corresponding events or function return to you, it won't update your table. So based on the data. You need to update the data. URL for your reference: stackblitz./edit/fycwiu?file=demo.js – Raj Kumar Commented Feb 19, 2020 at 6:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

it is better to use a back-end for getting pagination data because you can pass Offset , Limit to API and get data from it but for now i just fix your issue like so :

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: []
  };

  ponentDidMount() {
    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 ponent={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]}
            ponent="div"
            count={data.length}
            rowsPerPage={this.state.rowsPerPage}
            page={this.state.page}
            onChangePage={this.handleChangePage}
            onChangeRowsPerPage={this.handleChangeRowsPerPage}
          />
        </TableContainer>
      </div>
    );
  }
}

export default App;

in this way you pass Offset , Limit to your get data method and it will render filtered data for you

but you can see demo from here : https://codesandbox.io/s/friendly-williams-xxjf7

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

本文标签： javascriptHow to display correct rows per page using Material UI table paginationStack Overflow