Question

嗨，我使用react js，我是新手。我想对不属于material-ui的表使用Table pagination 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
  };

更新：

您需要使用以下状态值更新网址：

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

然后在更改页面时调用api。请检查下面的链接以获取代码。

Here is the Code Sandbox

如何使用表分页材质-UI React JS

1 个答案: