react-bootstrap-table - 自己的分页项目数

Question

我正在使用 react-bootstrap-table 中的 BootstrapTable 并从外部 API 获取数据。每次我得到一个 30 个项目的对象。因此 pageSize 为 30，但我从 API 获得了 totalPages 变量，假设为 6。不幸的是，表格数据每次都是 30，所以只有一页

我想告诉表格我想要多少页 - 6 - 每次在分页项中 onClick 我都会调用另一个 API 链接。我怎样才能做到这一点？

  onPageChange = page => {
    alert(`Let's go to page: ${page}`);
  };

  render() {
    const options = {
      onPageChange: this.onPageChange,
      hideSizePerPage: true,
      page: 1,
      sizePerPage: this.props.pageSize,
      paginationSize: 6,
    };
    return (
      <Card>
        <CardHeader>
          <h1> Sales report</h1>
        </CardHeader>
        <CardBody>
          <BootstrapTable
            data={this.props.sales}
            version="4"
            striped
            hover
            pagination
            options={options}
            keyField="Type"
          >
            {tableHeaders.map((header, index) => (
              <TableHeaderColumn key={index} dataField={header}>
                {header}
              </TableHeaderColumn>
            ))}
          </BootstrapTable>
        </CardBody>
      </Card>
    );
  }

Answer 1

您必须传递options 对象并通过单击每个页面指定确切的项目数和回调。

例如：

class PaginationHookTable extends React.Component {
  constructor(props) {
    super(props);

    this.options = {
      onPageChange: this.onPageChange,
      sizePerPage: 6,
    };

    this.state = {
        data: [],
    }
  }

  onPageChange = (page, sizePerPage) => {
    alert(`page: ${page}, sizePerPage: ${sizePerPage}`);

    // make another url
    const url = `http://someurl.com/api/endpoint?page=${page}`;

    // make request and update state with new data
    // axios just for example
    axios.get(url).then(resp => this.setState({ data: resp });
  }

  render() {
    return (
      <div>
        <BootstrapTable
          data={this.state.data}
          options={this.options}
          remote={true}

          // you need to use your number of total from backend
          // instead of 100 ofc
          fetchInfo={{ dataTotalSize: 100 }}
          pagination>
          <TableHeaderColumn dataField='id'>Product ID</TableHeaderColumn>
          <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
          <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
        </BootstrapTable>
      </div>
    );
  }
}

更新：您必须传递额外的道具：remote={true} 和 fetchInfo: { dataTotalSize: 100 } 以指定项目总数。

查看更多here。