4

As part of my daily work, got a task to implement pagination in my react app. I completed the UI and state management but got stuck at the pagination algorithm. I referred to many standard algorithms listed below

  1. https://gist.github.com/kottenator/9d936eb3e4e3c3e02598
  2. https://flaviusmatis.github.io/simplePagination.js

The problem is ours is a slightly modified algorithm. What I did is used the algorithm mentioned here - https://gist.github.com/kottenator/9d936eb3e4e3c3e02598 and implemented the basic pagination component with different UI states. (If array[i] === selectedPageFromProps, then highlight that page with different colour)

What this algorithm does is it will take selectedPage and totalNumberOfPages as an argument and return an array of all pages with an ellipsis (if more pages are there)

function pagination(selectedPage, totalPages) {return arrayOfPageNumbers with Ellipsis(if required)}

The algorithm should return different values based on the device - in mobile, we show a maximum 4 numbers and in desktop, we show maximum of 7 pages.

Different return values for this algorithm mentioned below.

In Mobile - Max number of pages to be displayed is 4
*****************************************************

pagination(1,4) : 1,2,3,4
pagination(2,4) : 1,2,3,4
pagination(3,4) : 1,2,3,4
pagination(4,4) : 1,2,3,4

If totalPages > 4

pagination(1,99) : 1,2,3,...,99
pagination(2,99) : 1,2,3,...,99
pagination(3,99) : 1,...,3,...,99
pagination(4,99) : 1,...,4,...,99
pagination(5,99) : 1,...,5,...,99
pagination(97,99) : 1,...,97,...99
pagination(98,99) : 1,...,98,...99
pagination(99,99) : 1,...,98,99

In Desktop/Tablet - Max number of pages to be displayed is 7
************************************************************
pagination(1,7) : 1,2,3,4,5,6,7
pagination(2,7) : 1,2,3,4,5,6,7
pagination(7,7) : 1,2,3,4,5,6,7


If totalPages > 7

pagination(1,99) : 1,2,3,4,5,6,...,99
pagination(2,99) : 1,2,3,4,5,6,...,99
pagination(4,99) : 1,2,3,4,5,6,...,99
pagination(5,99) : 1,...,3,4,5,6,7,...,99
pagination(95,99) : 1,...,93,94,95,96,97,...,99
pagination(96,99) : 1,...,94,95,96,97,98,...,99
pagination(97,99) : 1,...,95,96,97,98,99
pagination(98,99) : 1,...,95,96,97,98,99
pagination(99,99) : 1,...,95,96,97,98,99

Can someone help me to modify or implement the new algorithm?

Currently I am using the algorithm mentioned below.

function pagination(currentPage, nrOfPages, deltaValue) {
    var delta = deltaValue,
      range = [],
      rangeWithDots = [],
      l;

    range.push(1);

    if (nrOfPages <= 1) {
      return range;
    }

    for (let i = currentPage - delta; i <= currentPage + delta; i++) {
      if (i < nrOfPages && i > 1) {
        range.push(i);
      }
    }
    range.push(nrOfPages);

    for (let i of range) {
      if (l) {
        if (i - l === 2) {
          rangeWithDots.push(l + 1);
        } else if (i - l !== 1) {
          rangeWithDots.push("...");
        }
      }
      rangeWithDots.push(i);
      l = i;
    }

    return rangeWithDots;
  }
2
  • 3
    There are four cases: no ellipsis, ellipsis on the left, ellipsis on the right, and ellipsis both left and right. So the code needs to decide which case applies, and then generate the appropriate output for each case. Commented Apr 9, 2019 at 7:32
  • The best explanation I've found on stack overflow stackoverflow.com/a/56671681/14204424
    – miroana
    Commented Sep 4, 2021 at 17:21

2 Answers 2

7

Here is one version that accepts a count parameter to say how many you want to show (4 for mobile, 7 for desktop in your examples) and returns a function that takes the page number and the total number of pages, and returns an array containing page numbers and ellipses as needed.

Update: I wrote this only in answer to the question. But I recently needed this behavior myself, and wanted an actual ellipsis character rather than the three dots. This version makes "…" the default, but allows you to override as a defaulted optional parameter. (I also added a few more tests for clarity.)

const {floor, min, max} = Math
const range = (lo, hi) => Array .from ({length: hi - lo}, (_, i) => i + lo)

const pagination = (count, ellipsis = '…') => (page, total) => {
  const start = max (1, min (page - floor ((count - 3) / 2), total - count + 2))
  const end = min (total, max (page + floor ((count - 2) / 2), count - 1))
  return [
    ... (start > 2 ? [1, ellipsis] : start > 1 ? [1] : []), 
    ... range (start, end + 1), 
    ... (end < total - 1 ? [ellipsis, total] : end < total ? [total] : [])
  ]
}

const tests = [
  /* Mobile(4), 3 pages */   [4, 1, 3], [4, 2, 3], [4, 3, 3],
  /* Mobile(4), 4 pages */   [4, 1, 4], [4, 2, 4], [4, 3, 4], [4, 4, 4],
  /* Mobile(4), 99 pages */  [4, 1, 99], [4, 2, 99], [4, 3, 99], [4, 4, 99], [4, 5, 99], [4, 97, 99], [4, 98, 99], [4, 99, 99],
  /* Desktop(7), 5 pages */  [7, 1, 5], [7, 2, 5], [7, 3, 5], [7, 4, 5], [7, 5, 5],
  /* Desktop(7), 7 pages */  [7, 1, 7], [7, 2, 7], [7, 7, 7],
  /* Desktop(7), 99 pages */ [7, 1, 99], [7, 2, 99], [7, 4, 99], [7, 5, 99], [7, 6, 99], [7, 95, 99], [7, 96, 99], [7, 97, 99], [7, 98, 99], [7, 99, 99],  
]

tests .forEach (([c, p, t]) => {
  console .log (`pagination (${c}) (${p}, ${t}) //=> [${pagination (c) (p, t) .join (', ')}]`)
})  
.as-console-wrapper {max-height: 100% !important; top: 0}

Previous version:

const {floor, min, max} = Math
const range = (lo, hi) => Array .from ({length: hi - lo}, (_, i) => i + lo)

const pagination = (count) => (page, total) => {
  const start = max (1, min (page - floor ((count - 3) / 2), total - count + 2))
  const end = min (total, max (page + floor ((count - 2) / 2), count - 1))
  return [
    ... (start > 2 ? [1, '...'] : start > 1 ? [1] : []), 
    ... range (start, end + 1), 
    ... (end < total - 1 ? ['...', total] : end < total ? [total] : [])
  ]
}

const tests = [
  /* Mobile, 4 pages */   [4, 1, 4], [4, 2, 4], [4, 3, 4], [4, 4, 4],
  /* Mobile, 99 pages */  [4, 1, 99], [4, 2, 99], [4, 3, 99], [4, 4, 99], [4, 5, 99], [4, 97, 99], [4, 98, 99], [4, 99, 99],
  /* Desktop, 7 pages */  [7, 1, 7], [7, 2, 7], [7, 7, 7],
  /* Desktop, 99 pages */ [7, 1, 99], [7, 2, 99], [7, 4, 99], [7, 5, 99], [7, 95, 99], [7, 96, 99], [7, 97, 99], [7, 98, 99], [7, 99, 99],  
]

tests .forEach (([c, p, t]) => {
  console .log (`pagination (${c}) (${p}, ${t}) //=> [${pagination (c) (p, t)}]`)
})
.as-console-wrapper {max-height: 100% !important; top: 0}

We include a reusable range function, which gives an integer range, inclusive in its start, exclusive in its end. We could inline this function as it's only used once, but I find that I use it all over the place.

Our main function calculates the start and end of the range that includes the number, taking care not to extend beyond the range 1 - total. The complexities of max and min and the floor operations are to handle all the possibilities that the expected range would fall off these boundaries. Then it builds an output, dealing with the various combinations of values and ellipses. The beginning, before our start-end range, could be 1 followed by an ellipsis, or it could just be a 1, or it could be empty. And then after the range, we have similar behavior at the end.

I chose a slightly different handling than the question asked for when there should be an even number of values in that range. The question seems to want to ensure that the results are symmetric around the target value, even if that means leaving off one. (Or at least that's my interpretation of the samples.) I chose instead to keep the even number and add the extra to the right of the central number on the notion that navigation forward is more common that backward. But this is easy to change to the symmetric behavior, by replacing this line:

  const end = Math .min (total, Math .max (page + floor ((count - 2) / 2), count - 1))

with this variant:

  const end = Math .min (total, Math .max (page + floor ((count - 4 + 2 * (count % 2)) / 2), count - 1))
2
  • 1
    Am I reading this wrong: pagination (4) (3, 4) //=> [1,2,3,4] - show a count of 4 per page (first parameter), be on page 3, and have a total of 4 results? If there were only 4 results, wouldn't there only be 1 page? Commented May 31, 2022 at 14:58
  • @Ben: IIRC: this was simply to show a partial list of pages. If there are only four pages, we'll always show all four, regardless of which page we're on. Something separate would still be needed to highlight the current one if desired. pagination (7) (5, 99) //=> [1,...,3,4,5,6,7,...,99] should demonstrate more clearly. Show 7 of the pages from 1 to 99, centered at the current page of 5, with ellipses for those undisplayed. Commented Jun 1, 2022 at 12:57
2
// Implementation in ES6
function pagination(c, m) {
    var current = c,
        last = m,
        delta = 2,
        left = current - delta,
        right = current + delta + 1,
        range = [],
        rangeWithDots = [],
        l;

    for (let i = 1; i <= last; i++) {
        if (i == 1 || i == last || i >= left && i < right) {
            range.push(i);
        }
    }

    for (let i of range) {
        if (l) {
            if (i - l === 2) {
                rangeWithDots.push(l + 1);
            } else if (i - l !== 1) {
                rangeWithDots.push('...');
            }
        }
        rangeWithDots.push(i);
        l = i;
    }

    return rangeWithDots;
}

/*
Test it:
for (let i = 1, l = 20; i <= l; i++)
    console.log(`Selected page ${i}:`, pagination(i, l));

Expected output:
Selected page 1: [1, 2, 3, "...", 20]
Selected page 2: [1, 2, 3, 4, "...", 20]
Selected page 3: [1, 2, 3, 4, 5, "...", 20]
Selected page 4: [1, 2, 3, 4, 5, 6, "...", 20]
Selected page 5: [1, 2, 3, 4, 5, 6, 7, "...", 20]
Selected page 6: [1, "...", 4, 5, 6, 7, 8, "...", 20]
Selected page 7: [1, "...", 5, 6, 7, 8, 9, "...", 20]
Selected page 8: [1, "...", 6, 7, 8, 9, 10, "...", 20]
Selected page 9: [1, "...", 7, 8, 9, 10, 11, "...", 20]
Selected page 10: [1, "...", 8, 9, 10, 11, 12, "...", 20]
Selected page 11: [1, "...", 9, 10, 11, 12, 13, "...", 20]
Selected page 12: [1, "...", 10, 11, 12, 13, 14, "...", 20]
Selected page 13: [1, "...", 11, 12, 13, 14, 15, "...", 20]
Selected page 14: [1, "...", 12, 13, 14, 15, 16, "...", 20]
Selected page 15: [1, "...", 13, 14, 15, 16, 17, "...", 20]
Selected page 16: [1, "...", 14, 15, 16, 17, 18, 19, 20]
Selected page 17: [1, "...", 15, 16, 17, 18, 19, 20]
Selected page 18: [1, "...", 16, 17, 18, 19, 20]
Selected page 19: [1, "...", 17, 18, 19, 20]
Selected page 20: [1, "...", 18, 19, 20]
*/

I think this is what you're looking for?

More details at: https://gist.github.com/kottenator/9d936eb3e4e3c3e02598

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.