Разбиение не работает на результаты поиска - PullRequest
Новая
       22

Разбиение не работает на результаты поиска

0 голосов
/ 23 мая 2018

Я использую реагировать-JS-нумерация страниц для нумерации страниц.В моем коде, например, общее количество данных составляет 20, а при pageSize = 4 5 страниц отображаются правильно, а разбиение на страницы работает так, как задумано.Теперь, если я выполняю поиск по стране и, например, если в отфильтрованном результате содержится 5 записей, а pageSize = 4, на первой странице теперь отображаются 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;

1 Ответ

0 голосов
/ 23 мая 2018

Это происходит потому, что когда вы используете фильтры, вы вызываете handleCountryChange, который передает фильтры в getTableListData, а когда вы изменяете страницу, вы вызываете handlePageChange и не передаете ей какие-либо фильтры.

Вам необходимо сохранить свои фильтрыв переменную и передайте ее, когда вы меняете страницу.

...