更改 table 数据时，分页不会重置为第一页

Question

单击“更改 Table 数据”按钮后，分页不会重置为第一页。
[React-bootstrap-table-next] [react-bootstrap-table2-paginator]

重现步骤：

添加一个名为“更改 table 数据”的按钮，用于更改 table 数据。
将分页更改为其他页面，例如 2。
然后，单击“更改 table 数据”，这会更改 table 数据，但新的 table 数据仍将仅按照第二页呈现。分页不会重置到第一页。

每当 table 数据更改时，请告诉我将分页重置为第一页的更改。

Answer 1

下面是针对此要求的一种解决方法，react-bootstrap-table2 文档没有讨论此功能。

首先，向 table 添加一个引用，如下所示。

   <BootstrapTable
       wrapperClasses="mapb9table responsive"
       bordered={false}
       keyField="id"
       data={this.state.data}
       columns={columns}
       ref={ n => this.node = n }
       pagination={paginationFactory(optionsPag)}
    />

然后，在“更改 table 数据”的 onClick 方法中添加以下行。

  handleChangeOfTableData = () => {
     this.setState({ data: this.state.data });
     // This updates the pagination to the first page as required in this use-case.
     this.node.paginationContext.currPage= 1; 
  }

沙盒 URL 实施：https://codesandbox.io/s/pagination-b7m0y?file=/src/index.js

更改 table 数据时，分页不会重置为第一页

On change of table data, pagination is not resetting to the first page

pagination

reactjs

react-bootstrap

react-bootstrap-table