Skip to content Skip to sidebar Skip to footer

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, an

Solution 1:

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
/>

Post a Comment for "Solve Pagination Issues"