CODEWITHSUNDEEP
javascriptreactjs
Asking
Asking

Reputation: 4172

Solve pagination issues

I have an application where i added pagination functionality using react js. Also i have there search functionality which also works. The issue appears when i go to second page, and i delete all items from that page. In that moment where i delete the last item from page, the page should go on the previous page, but it still on the second without any item, but this should be automatically. The same issue is with search. When i am on the second page and i search the text first, the result is on first page, but i am on the second, or in this case automatically the pages should change, and i should see the result.

How to solve these 2 issues?

Upvotes: 2

Views: 624

Answers (1)

GalAbra
GalAbra

Reputation: 5148

You need to make two changes to your code:

  1. In your search function, you should filter data rather than mydata, otherwise your search won't reset upon every update:
const search = e => {
  const v = e.target.value;
  const result = data.filter(i =>
  //             ^ This was `mydata`
    i.title.toLowerCase().includes(v.toLowerCase())
  );
  setMyData(result);
};
  1. The total prop of Pagination should be defined dynamically, so the amount of pages matches the amount of items:
<Pagination
  defaultCurrent={1}
  defaultPageSize={9}
  onChange={handleChange}
  total={mydata.length}
  //     ^ This was hard-coded
/>

Upvotes: 1

Related Questions