loading...
Cover image for How to create pagination badges

How to create pagination badges

aralroca profile image Aral Roca Originally published at aralroca.com ・2 min read

Original article: https://aralroca.com/blog/pagination-badges

The purpose of this short article is to share a helper function to create typical paging badges. I have used this helper on several places and I think it can be useful for anyone who needs it.

Example of paging badges

The helper accepts a list of 3 options:

  • currentPage - The current page, which will determine how badges are displayed with separators.
  • pages - Total number of pages to display.
  • numBadges (optional). Number of badges to be generated, by default is 5.

It returns an array with the badges as number, filling null for the separators. This is implemented this way (in pure JavaScript instead of returning for example JSX) to reuse it everywhere: (P)React, Vue, Svelte, Angular... Even in Node or Deno.

export default function pagesBadges({ currentPage, pages, numBadges = 5 }) {
  const maxBadgesSide = numBadges - 2;

  // Without separators case
  // ex: [1, 2, 3, 4, 5]
  if (pages <= numBadges) {
    return Array.from({ length: pages }).map((v, i) => i + 1);
  }

  const sideBadges = Array.from({ length: numBadges - 1 });

  // With a separator at the end case
  // ex: [1, 2, 3, 4, null, 49]
  if (currentPage <= maxBadgesSide) {
    return [...sideBadges.map((v, i) => i + 1), null, pages];
  }

  // With a separator at the beginning case
  // ex: [1, null, 46, 47, 48, 49]
  if (currentPage > pages - maxBadgesSide) {
    return [1, null, ...sideBadges.map((v, i) => pages - i).reverse()];
  }

  // In the middle (separator left + right) case
  // ex: [1, null, 26, 27, 28, null, 49]
  sideBadges.pop();
  const curr = Math.floor(sideBadges.length / 2);
  const center = sideBadges.map((v, i) => currentPage - curr + i);

  return [1, null, ...center, null, pages];
}

I've published the code in GitHub (~200 bytes) in case that you want to use it in your projects:

This code is not providing any UI component, but it gives you the logic. With it you'll be able to create your paging component with the library/framework you want, to your liking. This partly offers a lot of flexibility in terms of design.

Example of usage in React

Sandbox using the paging module in React:

Posted on by:

aralroca profile

Aral Roca

@aralroca

Preact - Next.js - Deno - SSR - SSG 💻 Open source 📂 Machine learning 🤖 Books 📖 Sport 🏃‍♂️ Nature 🌱 Focus on being useful. I contribute AMAP to the OSS community. Love learning by doing.

Discussion

markdown guide