Question

我正在使用 react-js-pagination 进行分页。例如，在我的代码中，数据总数为20，而pageSize = 4，正确显示了5个页面，并且分页工作正常。现在，如果我根据国家/地区执行搜索，例如，如果过滤结果中有5条记录，并且pageSize = 4，则当我点击第二页编号I时，第一页显示4条正确记录以获取剩余的1条记录获得包含4个原始未过滤数据的第一页。以下是我的代码。请帮我解决这个问题。谢谢!!!

import React, { Component, Fragment } from "react";
import { Row } from "reactstrap";
import axios from "axios";
import Pagination from "react-js-pagination";
import FilterBar from "../../components/FilterBar";
import TableBody from "../../components/TableBody";
import { getTableListData } from "../../../api/api";

class TableListing extends Component {
  state = {
    tableListData: [],
    countries: [],
    cities: [],
    selectCountry: "",
    total: 0,
    activePage: 1,
    pageSize: 4
  };

  componentDidMount() {
    axios
      .all([
        getTableListData(this.state.activePage, this.state.pageSize),
        getCountry(),
        getCity()
      ])
      .then(
        axios.spread((response, country, city) => {
          this.getTableData(response);
          this.getCountryData(country);
          this.getCityData(city);
        })
      );
  }

  getTableData = response => {
    this.setState({
      tableListData: response.data.Data,
      total: response.data.Total
    });
  };

  handlePageChange = pageNumber => {
    let pNum = pageNumber || 1;
    this.setState({
      activePage: pNum
    });
    getTableListData(pNum, this.state.pageSize).then(response =>
      this.getTableData(response)
    );
  };

  handleCountryChange = val => {
    this.setState({
      selectCountry: val,
    });

    if (val !== null) {
      let searchSchool = "";
      let countryName = val
      getTableListData(this.state.activePage, this.state.pageSize, searchSchool, countryName)
        .then(response => {
          this.getTableData(countryWiseSchool);
        }
        );
    } else {
      this.handlePageChange();
    }
  }

  render() {
    let rowData = this.state.tableListData;
    let countryOptions = this.state.countries;

    return (
      <Fragment>
        <Row>
          <FilterBar           
            handleCountryChange={this.handleCountryChange}
            countryVal={this.state.selectCountry}
            countryOptions={countryOptions}     
           />
        </Row>
        <TableBody data={rowData} />
        <Row>
          <Pagination
            itemsCountPerPage={this.state.pageSize}
            activePage={this.state.activePage}
            totalItemsCount={this.state.total}
            pageRangeDisplayed={5}
            onChange={this.handlePageChange}
          />
        </Row>
      </Fragment>
    );
  }
}

export default TableListing;

Answer 1

这种情况正在发生，因为当您使用过滤器时，您调用handleCountryChange，它将过滤器传递给getTableListData，而当您更改页面时，您调用handlePageChange并且不向其传递任何过滤器。

您需要将过滤器保存在变量中，并在更改页面时将其传递。

分页不对搜索结果

1 个答案: