CODEWITHSUNDEEP
reactjspaginationaxios
Saya Ban
Saya Ban

Reputation: 3

Pagination isn't working on the search results

I am using react-js-pagination for the pagination. In my code for example, the total number of data is 20 and with the pageSize = 4, 5 pages are displayed correctly and the pagination works just as intended. Now if I perform search on the basis of country and for instance if the filtered result has 5 records in it, with the pageSize = 4, first page shows 4 correct records now to get the remaining 1 record when I click on second page number I get the first page with the 4 original unfiltered data. Below is my code. Please help me solve this issue. Thank you!!!

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;

Upvotes: 0

Views: 556

Answers (1)

supra28
supra28

Reputation: 1636

That is happening because when you use filters you call handleCountryChange which passes filters to getTableListData while when you change the page you call handlePageChange and don't pass any filters to it.

You need to save your filters in a variable and pass it when ever you change the page.

Upvotes: 0

Related Questions