How do I search data with pagination in React? - reactjs

Question

class Employee extends Component {
constructor() {
super();
this.state = {
// employees: employees,
employees: [],
searchfield: "",
currentPage: 1,
resultsPerPage: 50,
holder: [],
filteredEmployees: [],
value: "",
};
}
componentDidMount = async () => {
axios.get(`http://localhost:5000/`).then((res) => {
const employees = res.data;
this.setState({
employees: employees.recordsets[0],
holder: employees.recordsets[0],
});
});
};
onSearchChange = (event) => {
let { value } = event.target;
this.setState({ value }, () => {
var updatedList = this.state.holder;
updatedList = updatedList.filter((employee) => {
const fullName = employee.empFirstNm + " " + employee.empLastNm;
return (
fullName.toLowerCase().search(this.state.value.toLowerCase()) !== -1
);
});
this.setState({ employees: updatedList });
});
};
//change page
onPaginate = (pageNumber) => {
this.setState({ currentPage: pageNumber });
};
render() {
const { employees, searchfield, currentPage, resultsPerPage } = this.state;
const { onRouteChange } = this.props;
//Get current employees
const indexOfLastEmployee = currentPage * resultsPerPage;
const indexOfFirstEmployee = indexOfLastEmployee - resultsPerPage;
console.log("indexOfFirstEmployee: ", indexOfFirstEmployee);
console.log("indexOfLastEmployee: ", indexOfLastEmployee);
const filteredEmployees = employees.slice(
indexOfFirstEmployee,
indexOfLastEmployee
);
return !employees.length ? (
<div className="tc">
<h1>Loading</h1>
<Spinner animation="border" variant="danger" />
</div>
) : (
<FadeIn>
<div className="tc">
<div
className="
d-flex
justify-content-between
flex-wrap
flex-md-nowrap
align-items-center
pt-3
pb-2
mb-3
border-bottom"
>
<h1 className="display-2">Employees</h1>
<div
className="tr"
style={{
margin: "15px 0",
}}
>
<NewEmployee employees={employees} />
<SearchBox
searchChange={this.onSearchChange}
value={this.state.value}
/>
</div>
</div>
<Scroll>
<CardList
employees={filteredEmployees}
onDelete={this.handleDelete}
onRouteChange={onRouteChange}
/>
<Table
employees={filteredEmployees}
onRouteChange={onRouteChange}
/>
<Pagination
resultsPerPage={resultsPerPage}
totalResults={employees.length}
onPaginate={this.onPaginate}
/>
</Scroll>
</div>
</FadeIn>
);
}
}
I have tried implementing it with conditions of whether the results
is greater than or equal to the results on a page but it did not
work since it doesnt cover every single case based on the result.
I am getting the search to work but when my current page is anything besides 1 is when the search doesn't work.
Any idea how I can get the filtering to work regardless of what page I
am on?

Answer 1

Figured this out. I just needed to set currentPage to 1 at the end of my search:
onSearchChange = (event) => {
let { value } = event.target;
this.setState({ value }, () => {
//running this after setting the value in state because of async
var updatedList = this.state.holder;
updatedList = updatedList.filter((employee) => {
const fullName = employee.empFirstNm + " " + employee.empLastNm;
return (
fullName.toLowerCase().search(this.state.value.toLowerCase()) !== -1
);
});
this.setState({ employees: updatedList });
this.setState({ currentPage: 1 });
});