As part of my daily work, got a task to implement pagination in my react app. I pleted the UI and state management but got stuck at the pagination algorithm. I referred to many standard algorithms listed below
- .js
The problem is ours is a slightly modified algorithm. What I did is used the algorithm mentioned here - and implemented the basic pagination ponent 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;
}
As part of my daily work, got a task to implement pagination in my react app. I pleted the UI and state management but got stuck at the pagination algorithm. I referred to many standard algorithms listed below
- https://gist.github./kottenator/9d936eb3e4e3c3e02598
- 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./kottenator/9d936eb3e4e3c3e02598 and implemented the basic pagination ponent 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;
}
- 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. – user3386109 Commented Apr 9, 2019 at 7:32
- The best explanation I've found on stack overflow stackoverflow./a/56671681/14204424 – miroana Commented Sep 4, 2021 at 17:21
2 Answers
Reset to default 8Here 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 plexities 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 binations 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 mon 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))
// 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./kottenator/9d936eb3e4e3c3e02598