Calculating item offset for pagination
PaginationPagination Problem Overview
this seems like very simple maths but somehow, my brain cant think ...
i am trying to implement pagination and will need to calculate the item offset to use in limiting my result set. i am having problems calculating what index the first item of the page should have.
eg.
with 1 page having 10 items
page 1 will have items 1 - 10
page 2 ............... 11 - 20
page 3 ............... 21 - 30
i thought of
offset = page * itemsPerPage + 1
but this will not be the case for page 1. there must be a formula for this? am using PHP/Zend_Paginator/Doctrine2 but this should be language independent
wonder if this should be in the the maths stack exchange site
Pagination Solutions
Solution 1 - Pagination
Use offset = (page - 1) * itemsPerPage + 1
.
Solution 2 - Pagination
Honestly depends. I'm no PHP person, but I'll put both out there. If you are pulling your records in to some form of collection (list, array, etc.) then your formula should be:
offset = (page - 1) * itemsPerPage
This is because most (again, I'm not a PHP person) arrays and lists use 0 for their first element. If they do not use 0 for their first element and/or you're pulling from a table or something else where the IDs start at 1, then it should be:
offset = (page - 1) * itemsPerPage + 1
I hope that's clear and helps.
Solution 3 - Pagination
start = (page - 1) * itemsPerPage + 1
end = totalItems
if (itemsPerPage < totalItems) {
end = itemsPerPage * page
if (end > totalItems) {
end = totalItems;
}
}
// e.g. "21-30 of 193 items"
start + '-' + end + ' of ' + totalItems + ' items'
Solution 4 - Pagination
Using JS as an example, for progressive web app people...
JS arrays have the prototype method .slice(start, end)
overview here it takes a start index and an end index as arguments.
I found the easiest way to calc both indexes is as follows;
Start Index
var start = parseInt((selectedPage - 1) * resultsPerPage);
End Index
var end = parseInt(selectedPage * resultsPerPage);
Execution
var myPaginatedArray.slice(start, end);
Solution 5 - Pagination
I think this one is perfect and covers all scenario.
$offset = ($pageLimit * $page) - $pageLimit;
Solution 6 - Pagination
Thought I would add the following for displaying text like e.g:
> Viewing 21-30 of 32 items.
In this example:
itemsPerPage = 10
page = 3
totalItems = 32
And there would be a total of 4 pages where the last page only has 2 items to display. The following worked for me:
(page - 1) * itemsPerPage + 1 + "-" +
Math.Min((page - 1) * itemsPerPage + itemsPerPage , totalItems ) + " of " +
totalItems + " items."
Sorry that is in C# strictly but the idea should be clear. Math.Min(x, y)
returns the lower number of two parameters. There is probably an easier solution to calculate the upper bound without using Math.Min
.
Solution 7 - Pagination
A simple pagination equation that covers all scenerio will be:
$page = $_GET['page'];
$items_per_page = 20; //for example
$offset = 0; //initial offset
if ($page != 1) {
$offset = ($page * $items_per_page) - $items_per_page;
}
Given items per page = 5
OUTPUT
when page = 1, offset = 0
when page = 2, offset = 5
when page = 3, offset = 10
when page = 4, offset = 15 . . .
Solution 8 - Pagination
Use following formulae, these work well:
- For
start_index
:(page_number - 1) * per_page
- For
end_index
:start_index + (per_page - 1)
(Usually we specify simplyper_page - 1
in SQL)
page_number | start_index | end_index | per_page | formula for start_index
1 | 0 | 24 | 25 | (page_number - 1) * per_page
2 | 25 | 49 | 25 | (page_number - 1) * per_page
3 | 50 | 99 | 25 | (page_number - 1) * per_page
Solution 9 - Pagination
use this
$row_page = 5; //items per page
if(isset($_GET['p'])){
$page_num = $_GET['p'];
} else {
$page_num = 0;
}
$offset = ( $page_num ) * $row_page;
$cn = 31;
$pg = (int)ceil($cn / $row_page);
for ($i = 1; $i <= $pg; $i++){
echo "<br/><a href='?p=$i'>".$i;
}
Solution 10 - Pagination
I have faced this before in Angular 4, this is an edit of a piece of template with a list with pagination made simpler:
<div *ngFor="let item of pagedItems; let i = index">
<div class="item-caption">
Item {{(currentPage - 1) * itemsPerPage + (i + 1)}} of {{totalItemsDownloaded}}
</div>
<div class="item-name">{{item.name}}</div>
</div>
I have always handy currentPage
as a result of clicking on Prev & Next buttons but initialized with 1, itemsPerPage
as an App setting and totalItemsDownloaded
is the count of total items the WebAPI call reported.
I hope it helps
Solution 11 - Pagination
following is standard and easiest way to calculate the offset when every page event is triggered.
offset = ((pageNumber-1) * itemPerPage + 1)-1;
pageNumber = 1
itemPerPage = 10
offset = ((pageNumber-1) * itemPerPage + 1)-1;
console.log("offset for 1st page", offset)
pageNumber = 2
offset = ((pageNumber-1) * itemPerPage + 1)-1;
console.log("offset for 2nd page", offset)
pageNumber = 3
offset = ((pageNumber-1) * itemPerPage + 1)-1;
console.log("offset for 3rd page", offset)