如何解决反应表中的分页重置问题？

Question

我正在为一个功能工作，我必须在使用 react-table 的组件外应用过滤器，但在应用过滤器后当前页码不会重置。 获取的结果（已应用服务器端分页）显示第一页的数据。

我尝试使用回调 onFetchData 来更改当前页码，但是当应用来自组件外部的过滤器时它不会被触发。

render() {
    const { orders, onUpdate } = this.props;
    const defaultPageSize = 50;

    return (
      <div className="admin-report-table">
        <ReactTable
          data={orders.ordersData}
          columns={this.columns}
          pages={Math.ceil(orders.count / defaultPageSize)}
          defaultPageSize={defaultPageSize}
          multiSort={false}
          showPageSizeOptions={false}
          showPaginationTop
          className="-striped -highlight"
          noDataText="No orders found. Please check your connection or change your filters."
          filterable
          manual // informs React Table that you'll be handling sorting and pagination server-side
          onFetchData={(state) => {
            const { page, pageSize, filtered, sorted } = state;
            const adjustedPage = page + 1; // since library page starts from 0

            onUpdate({
              page: adjustedPage,
              filtered,
              pageSize,
              sorted,
            });
          }}
        />
      </div>
    );
  }

页码应重置为 1 例如当前显示为第 2 页，共 3 页，在应用表格外部的过滤器后，将获取并显示结果，但第 2 页共 3 页不会更改，而表中的结果为第 1 页。

Answer 1

我正在为一个功能工作，其中我必须在使用react-table的组件外部应用过滤器，但是在应用过滤器后，当前页码不会被重置。 提取的结果（已应用服务器端分页）显示了第一页的数据。

我尝试使用回调onFetchData更改当前页码，但是当从组件外部应用过滤器时，它不会被触发。

render() {
    const { orders, onUpdate } = this.props;
    const defaultPageSize = 50;

    return (
      <div className="admin-report-table">
        <ReactTable
          data={orders.ordersData}
          columns={this.columns}
          pages={Math.ceil(orders.count / defaultPageSize)}
          defaultPageSize={defaultPageSize}
          multiSort={false}
          showPageSizeOptions={false}
          showPaginationTop
          className="-striped -highlight"
          noDataText="No orders found. Please check your connection or change your filters."
          filterable
          manual // informs React Table that you'll be handling sorting and pagination server-side
          onFetchData={(state) => {
            const { page, pageSize, filtered, sorted } = state;
            const adjustedPage = page + 1; // since library page starts from 0

            onUpdate({
              page: adjustedPage,
              filtered,
              pageSize,
              sorted,
            });
          }}
        />
      </div>
    );
  }

页码应重置为1，例如当前显示为第2页，共3页，应用表格外部的过滤器后，将提取并显示结果，但在显示表中的结果时，第2页，共3页不变第1页。

Answer 2

我正在为一个功能工作，其中我必须在使用react-table的组件外部应用过滤器，但是在应用过滤器后，当前页码不会被重置。 提取的结果（已应用服务器端分页）显示了第一页的数据。

我尝试使用回调onFetchData更改当前页码，但是当从组件外部应用过滤器时，它不会被触发。

render() {
    const { orders, onUpdate } = this.props;
    const defaultPageSize = 50;

    return (
      <div className="admin-report-table">
        <ReactTable
          data={orders.ordersData}
          columns={this.columns}
          pages={Math.ceil(orders.count / defaultPageSize)}
          defaultPageSize={defaultPageSize}
          multiSort={false}
          showPageSizeOptions={false}
          showPaginationTop
          className="-striped -highlight"
          noDataText="No orders found. Please check your connection or change your filters."
          filterable
          manual // informs React Table that you'll be handling sorting and pagination server-side
          onFetchData={(state) => {
            const { page, pageSize, filtered, sorted } = state;
            const adjustedPage = page + 1; // since library page starts from 0

            onUpdate({
              page: adjustedPage,
              filtered,
              pageSize,
              sorted,
            });
          }}
        />
      </div>
    );
  }

页码应重置为1，例如当前显示为第2页，共3页，应用表格外部的过滤器后，将提取并显示结果，但在显示表中的结果时，第2页，共3页不变第1页。

Answer 3

我正在为一个功能工作，其中我必须在使用react-table的组件外部应用过滤器，但是在应用过滤器后，当前页码不会被重置。 提取的结果（已应用服务器端分页）显示了第一页的数据。

我尝试使用回调onFetchData更改当前页码，但是当从组件外部应用过滤器时，它不会被触发。

render() {
    const { orders, onUpdate } = this.props;
    const defaultPageSize = 50;

    return (
      <div className="admin-report-table">
        <ReactTable
          data={orders.ordersData}
          columns={this.columns}
          pages={Math.ceil(orders.count / defaultPageSize)}
          defaultPageSize={defaultPageSize}
          multiSort={false}
          showPageSizeOptions={false}
          showPaginationTop
          className="-striped -highlight"
          noDataText="No orders found. Please check your connection or change your filters."
          filterable
          manual // informs React Table that you'll be handling sorting and pagination server-side
          onFetchData={(state) => {
            const { page, pageSize, filtered, sorted } = state;
            const adjustedPage = page + 1; // since library page starts from 0

            onUpdate({
              page: adjustedPage,
              filtered,
              pageSize,
              sorted,
            });
          }}
        />
      </div>
    );
  }

页码应重置为1，例如当前显示为第2页，共3页，应用表格外部的过滤器后，将提取并显示结果，但在显示表中的结果时，第2页，共3页不变第1页。

Answer 4

我正在为一个功能工作，其中我必须在使用react-table的组件外部应用过滤器，但是在应用过滤器后，当前页码不会被重置。 提取的结果（已应用服务器端分页）显示了第一页的数据。

我尝试使用回调onFetchData更改当前页码，但是当从组件外部应用过滤器时，它不会被触发。

render() {
    const { orders, onUpdate } = this.props;
    const defaultPageSize = 50;

    return (
      <div className="admin-report-table">
        <ReactTable
          data={orders.ordersData}
          columns={this.columns}
          pages={Math.ceil(orders.count / defaultPageSize)}
          defaultPageSize={defaultPageSize}
          multiSort={false}
          showPageSizeOptions={false}
          showPaginationTop
          className="-striped -highlight"
          noDataText="No orders found. Please check your connection or change your filters."
          filterable
          manual // informs React Table that you'll be handling sorting and pagination server-side
          onFetchData={(state) => {
            const { page, pageSize, filtered, sorted } = state;
            const adjustedPage = page + 1; // since library page starts from 0

            onUpdate({
              page: adjustedPage,
              filtered,
              pageSize,
              sorted,
            });
          }}
        />
      </div>
    );
  }

页码应重置为1，例如当前显示为第2页，共3页，应用表格外部的过滤器后，将提取并显示结果，但在显示表中的结果时，第2页，共3页不变第1页。

Answer 5

我正在使用反应表的开箱即用分页，我遇到的问题是如何从反应表中提取当前的 pageIndex。 因为每次在 React 表的行上有一个动作，都不会改变 no。 行，React 表将返回到第 0 页。

以下对我有用，hacky但有效-

在调用 React 表的父组件上 - signalTableData是我拥有列和数据行数据的地方。 这可能是您的数据。

const [pageIndex, setPageIndex] = useState(0);

<ReactTable
     columns={signalTableData ? signalTableData.headerRow : <div>Loading...</div>}
                  data={signalTableData.dataRows ? signalTableData.dataRows : <div>Loading...</div>}
                  sortbyCollumn='originDate'
                  desc={true}
                  pageIndex = {pageIndex}
                  setPageIndex = {setPageIndex}
              />

一个 React Table js -

function Table({ columns, data, sortbyCollumn, desc, pageIndex, setPageIndex }) {...

和

useTable(
    {
      columns,
      data,
      defaultColumn, // Be sure to pass the defaultColumn option
      filterTypes,
      autoResetPage: false,
      initialState: {
        pageSize: 5,
        pageIndex: pageIndex,
        sortBy: [
          {
            id: sortbyCollumn,
            desc: desc
          }
        ] },
    },