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

您必须传递core-js/library/modules/es6.object.assign.js对象，并通过单击每个页面来指定确切的项目数和回调。

例如：

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}来指定物品总数。

查看更多here。