EN
JavaScript - how to calculate page number when we know size of page and item index?
5
points
In this article, we're going to have a look at how in JavaScript, calculate page number on which item is located, when we know:
- maximal size of the single page,
- item index (counted from
0
).
Simple example:
// ONLINE-RUNNER:browser;
const calculatePageNumber = (pageSize, itemIndex) => {
return Math.ceil(++itemIndex / pageSize);
};
// Example usage:
const pageSize = 10;
const itemIndex = 29;
const pageNumber = calculatePageNumber(pageSize, itemIndex);
console.log('pageNumber=' + pageNumber); // pageNumber=3
The above logic result explanation:
- the maximal size of the single page is
10
(pageSize
 variable),- the item index is
29
 (itemIndex
 variable),So:
- page
1
 should contain item indexes from0
toÂ9
- page
2
 should contain item indexes from10
 toÂ19
- page
3
 should contain item indexes from20
 toÂ29
so we have item onÂ
3
rd page.
Â
Testing
In this section we present simple test for different calculatePageNumber()
 usage cases.
// ONLINE-RUNNER:browser;
const calculatePageNumber = (pageSize, itemIndex) => {
return Math.ceil(++itemIndex / pageSize);
};
// Exmaple tests:
const pageSize = 10;
var testingData = [
{ itemIndex: 0, pageNumber: 1 },
{ itemIndex: 1, pageNumber: 1 },
{ itemIndex: 9, pageNumber: 1 },
{ itemIndex: 10, pageNumber: 2 },
{ itemIndex: 11, pageNumber: 2 }
];
console.log('Page numbers:');
console.log('[expected]\t[actual]');
for (const entry of testingData) {
const pageNumber = calculatePageNumber(pageSize, entry.itemIndex);
if (entry.pageNumber !== pageNumber) {
throw new Error('Page number calculator error.');
}
console.log(entry.pageNumber + '\t\t' + pageNumber); // expected vs actual
}
Â