Pagination
// 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]
*/
Pagination calculations
export default function App() {
function pagination(numberOfResults, currentPage, itemsPerPage) {
return {
total: numberOfResults,
per_page: itemsPerPage,
current_page: currentPage,
last_page: Math.ceil(numberOfResults / itemsPerPage),
from: (currentPage - 1) * itemsPerPage + 1,
to:
currentPage * itemsPerPage < numberOfResults
? currentPage * itemsPerPage
: numberOfResults
};
}
const results = [...Array(100)].map((x) => []);
const numberOfResults = results.length;
const currentPage = 5;
const itemsPerPage = 20;
const { total, per_page, current_page, last_page, from, to } = pagination(
numberOfResults,
currentPage,
itemsPerPage
);
return (
<div className="App">
{current_page <= last_page &&
<p>Viewing {from} - {to} out of {total}</p>
}
<p>
<br />
Showing {per_page} results per page
<br />
You are on page number: {current_page}
<br />
The last page is number: {last_page}
</p>
</div>
);
}
826571dc-4239-44f7-be94-866fe639b1b7
Created on: 12th October, 2022
Last updated: 12th October, 2022
Source: Simple pagination algorithm · GitHub
Tagged With: