How to create pagination badges

  • 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.
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];
}

Example of usage in React

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Spring Boot: Webjars — bundle your favourite JS library easily

Understanding gotchas with un-mounting using useEffect hook— React

Building the Lumon macrodata refiner

How To Create Dark and Light Mode Website using jQuery

How To Create Dark and Light Mode Website using jQuery

[Leet Code] Length of Last Word

Creating a flexible Uploader component in Angular

Full App for Tracking Currencies with Vuejs3 + Nodejs + Typescript — Backend

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aral Roca Gomez

Aral Roca Gomez

More from Medium

HTTP Error handling in React.js with an Interceptor

Features of Different Javascript Framework : Node Js, BackBone JS, Ext Js

Fix your Express error handling now