时间戳

首页 > 解决方案 > 带有语义 UI 反应表的表分页

javascript - 带有语义 UI 反应表的表分页

问题描述

我有一个<Table>组件semantic-ui-react，用于渲染从模拟 api 调用中获取的数据。我可能有X很多行，所以我正在考虑添加分页。我找到了一些解决方案，但它们看起来太笨重了。

任何人都可以就如何处理简单的分页提出一些建议吗？假设我只想在每页上呈现 5 行数据。我怎样才能做到这一点？

我这里有一个密码箱。

class PaginationExample extends Component {
  constructor(props) {
    super(props);

    this.state = { tableData: [], activePage: 1 };
  }

  async componentDidMount() {
    await this.getData();
  }

  getData = async () => {
    const { data } = await axios.get("/slotInfo");
    console.log(data);
    const tableData = data.data.slotInfo;
    this.setState({ tableData: tableData });
  };

  //change handlers for pagination

  handlePageClick = (e, { name }) => this.setState({ activePage: name });

  render() {
    const { tableData, activePage } = this.state;
    return (
      <div className="App">
        <h1>Table Pagination w/ SUI-React Component</h1>
        <Table style={{ marginTop: "5em" }} inverted celled>
          <Table.Header fullWidth>
            <Table.Row>
              <Table.HeaderCell>Slot Id</Table.HeaderCell>
              <Table.HeaderCell>deviceId</Table.HeaderCell>
              <Table.HeaderCell>Initialized</Table.HeaderCell>
              <Table.HeaderCell>Label</Table.HeaderCell>
            </Table.Row>
          </Table.Header>

          <Table.Body>
            {Object.values(tableData).map(
              ({ slotId, deviceId, initialized, label }) => {
                return (
                  <Table.Row>
                    <Table.Cell>{slotId}</Table.Cell>
                    <Table.Cell>{deviceId}</Table.Cell>
                    <Table.Cell>{initialized}</Table.Cell>
                    <Table.Cell>{label}</Table.Cell>
                  </Table.Row>
                );
              }
            )}
          </Table.Body>

          <Table.Footer>
            <Table.Row>
              <Table.HeaderCell colSpan="4">
                <Menu floated="right" pagination>
                  <Menu.Item as="a" icon>
                    <Icon name="chevron left" />
                  </Menu.Item>
                  <Menu.Item
                    name="1"
                    active={activePage === "1"}
                    onClick={this.handlePageClick}
                  />
                  <Menu.Item
                    name="2"
                    active={activePage === "2"}
                    onClick={this.handlePageClick}
                  />
                  <Menu.Item
                    name="3"
                    active={activePage === "3"}
                    onClick={this.handlePageClick}
                  />
                  <Menu.Item
                    name="4"
                    active={activePage === "4"}
                    onClick={this.handlePageClick}
                  />
                  <Menu.Item as="a" icon>
                    <Icon name="chevron right" />
                  </Menu.Item>
                </Menu>
              </Table.HeaderCell>
            </Table.Row>
          </Table.Footer>
        </Table>
      </div>
    );
  }
}

标签： javascriptreactjssemantic-ui

解决方案

使用 Semantic UI 中的分页组件怎么样？ https://react.semantic-ui.com/addons/pagination/

基本上你只需要提供 props totalPages，activePage/defaultActivePage和onPageChange你将用于你的页面更改功能。

推荐阅读