Pagination Common Mistakes and Fixes

Pagination Common Mistakes and Fixes

Mistake 1: Not Clamping the Page Number

Problem: going to page 0 or page total+1.

Fix: currentPage = Math.max(1, Math.min(page, totalPages)).

Mistake 2: No Ellipsis for Many Pages

Problem: 100 page buttons rendered.

Fix: implement the ellipsis algorithm (show first, last, current, neighbors).

Mistake 3: Not Resetting Page on Filter Change

Problem: user is on page 5, applies a filter with only 2 pages, sees nothing.

Fix: reset currentPage = 1 when filters change.

Mistake 4: No Disabled State for Prev/Next

Problem: clicking Prev on page 1 or Next on the last page.

Fix: disable Prev when currentPage === 1 and Next when currentPage === totalPages.

Mistake 5: Not Updating Total Pages on Data Change

Problem: data changes but totalPages is stale.

Fix: recalculate totalPages = Math.ceil(data.length / pageSize) on every data change.

Mistake 6: No Loading State for Server-Side

Problem: blank list while fetching.

Fix: show a loading indicator while the API request is in flight.

The Takeaway

Common mistakes: not clamping page (Math.max/min), no ellipsis (use algorithm), not resetting on filter change (set page to 1), no disabled states (disable at boundaries), stale totalPages (recalculate), and no loading state for server-side. Fix each for a robust pagination component.