JavaScript - how to calculate page number when we know size of page and item index?

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 from 0 to 9
• page 2 should contain item indexes from 10 to 19
• page 3 should contain item indexes from 20 to 29

so we have item on 3rd 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
}

See also

1. JavaScript - calculate number of pages from size of page and total number of items