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

Question

我正在使用 react-bootstrap-table 中的 BootstrapTable 并从外部 API 获取数据。 每次我得到一个 30 件的 object。 因此 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 object 并通过单击每个页面指定确切的项目数和回调。

例如：

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 }来指定项目总数。

在这里查看更多。