如何使用表格分页材料-ui react js

Question

您好，我使用 react js，我是新手。我想用Table paginationmaterial-ui 做一个不属于material-ui 的表。比如我要每页2 行。我用reactStrap 表。如果可能的话，告诉我怎么做。

  render() {
    const items = this.props.items.map(item => {
      return (
        <tr key={item.id}>
          <td>
            <div style={{ width: "110px" }}>
              <Button
                color="success"
                buttonLabel="Edit"
                item={item}
                updateState={this.props.updateState}
              >
                Edit
              </Button>

              <Button color="danger" onClick={() => this.deleteItem(item.id)}>
                Del
              </Button>
            </div>
          </td>
          <th scope="row">{item.id}</th>
          <td>{item.name}</td>
          <td>{item.username}</td>
          <td>{item.email}</td>
        </tr>
      );
    });

    return (
      <div
        style={{
          maxHeight: "600px",
          overflowY: "auto"
        }}
      >
        <Table responsive hover>
          <thead>
            <tr>
              <th>Action</th>
              <th>ID</th>
              <th>name</th>
              <th>username</th>
              <th>email</th>
            </tr>
          </thead>
          <tbody>{items}</tbody>
        </Table>
      </div>
    );
  }
}

你可以在CodeSandbox看到我的桌子。提前感谢你的回答

Answer 1

我准备了一个示例仅用于分页。您需要使用分页参数进行 api 调用。由于您的 api 仅返回 10 条记录，所以我设置了 rowsPerPage: 5 以便您可以得到更改页面的反映。但默认值应该是rowsPerPage: 10

  state = {
    items: [],
    page: 0,
    rowsPerPage: 5
  };

更新：

您需要使用如下状态值更新 url：

let url = `https://reqres.in/api/users?page=${this.state.page +
      1}&per_page=${this.state.rowsPerPage}`;

然后在换页的时候调用api。请查看下面的链接获取代码。

Here is the Code Sandbox

Answer 2

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Pagination from '@material-ui/lab/Pagination';

const useStyles = makeStyles((theme) => ({
  root: {
    "& > * + *": {
      marginTop: theme.spacing(2),
    },
  },
}));

export default function PaginationComponent(props) {
  const classes = useStyles();
  const [page, setPage] = React.useState(1);

  const handleChange = (value) => {
    setPage(value);
    props.paginationHandler(value);
  };

  return (
    <div className={classes.root}>
      <Pagination
        count={props.totalCount}
        page={page}
        variant="outlined"
        color="primary"
        onChange={handleChange}
      />
    </div>
  );
}