What is the logic behind google's pagination behaviour?
My paginator goes something like this:
[1] 2 3 ... 184 >
< 1 [2] 3 4 ... 184 >
< 1 2 [3] 4 5 ... 184 >
< 1 2 3 [4] 5 6 ... 184 >
< 1 ... 3 4 [5] 6 7 ... 184 >
< 1 ... 4 5 [6] 7 8 ... 184 >
< 1 ... 5 6 [7] 8 9 ... 184 >
< 1 ... 6 7 [8] 9 10 ... 184 >
Here is a live version of the above example: http://www.dev.thomaskile.me/?page=test-zone&module=Paginator.
I know why this is happening; I've set the amount of page numbers to be shown on each side of current page to two (2).
I would rather have the range of numbers to be equal like this:
[1] 2 3 4 5 6 7 8 ... 184 >
< 1 [2] 3 4 5 6 7 ... 184 >
< 1 2 [3] 4 5 6 7 ... 184 >
< 1 2 3 [4] 5 6 7 ... 184 >
< 1 ... 3 4 [5] 6 7 ... 184 >
< 1 ... 4 5 [6] 7 8 ... 184 >
< 1 ... 5 6 [7] 8 9 ... 184 >
< 1 ... 6 7 [8] 9 10 ... 184 >
It's at the beginning and the end I need to make some changes, but can't figure out how to make it an easy operation...
I would like to make it flexible as well. Meaning I would like to be able to change the number of wanted pages on each side, and have the script expand and calculate it all...
Here is my code so far:
/**
* page controller buttons
* @param str $this->querySting href="URL string"
* @param str $this->pageIdentifier $_GET['this-name']
* @param int $this->numPages Total amount of pages
* @param int $this->midRange Number of pages to show on each side of current page
*/
public function prevPage()
{
if ($this->currentPage > 1){
$prevPage = ($this->currentPage - 1);
return '<a href="'.$this->queryString.'&'.$this->pageIdentifier.'='.$prevPage.'" class="prev">prev</a>';
}
}
public function nextPage()
{
if ($this->currentPage < $this->numPages) {
$nextPage = $this->currentPage + 1;
return '<a href="'.$this->queryString.'&'.$this->pageIdentifier.'='.$nextPage.'" class="next">next</a>';
}
}
public function firstPage()
{
if ($this->currentPage > ($this->midRange + 1)) { // if number of pages between "currentPage" and "firstPage" exceeds $midRange with 1...
$firstPage .= '<a href="'.$this->queryString.'&'.$this->pageIdentifier.'=1" class="first">1</a>'; // ...show "first page"-link
if ($this->currentPage > ($this->midRange + 2)) { // if number of pages between $currentPage and "first page" exceeds $midRange with more than 1
$firstPage .= '…'; // add "..." between "1st page"-link and first page in $range
}
}
return $firstPage;
}
public function lastPage()
{
if ($this->currentPage < ($this->numPages - $this->midRange)) { // if number of pages between "currentPage" and "last page" is equal to $midRange
if (($this->currentPage < ($this->numPages - $this->midRange) - 1)) { // if number of pages between $currentPage and "last page" exceeds $range with more than two
$lastPage .= '…'; // add "..." between "last page"-link and last page in $range
}
$lastPage .= '<a href="'.$this->queryString.'&'.$this->pageIdentifier.'='.$this->numPages.'" class="last">'.$this->numPages.'</a>'; // show "last page"-link
}
return $lastPage;
}
# Range of pages between (prev first ...) and (... last next)
public function listPages()
{
for ($i = ($this->currentPage - $this->midRange); $i < (($this->currentPage + $this->midRange) + 1); $i++){
if (($i > 0) && ($i <= $this->numPages)) // if page number are within page range
{
if ($i == $this->currentPage) { $listPages .= '<a class="current">'.$i.'</a>'; } // if we're on current page
else { $listPages .= '<a href="'.$this->queryString.'&'.$this->pageIdentifier.'='.$i.'">'.$i.'</a>'; } // if not current page
}
}
return $listPages;
}
The logic in Google's pagination is as follows: there are 10 page links shown at any time (e.g. 1 2 3 4 5 6 7 8 9 10) unless there are less than 10 total pages. the active link (current page) is in the 6th position, except for when the active link is below 6 or less than 4 from the last position.
To be SEO-friendly, convert your infinite scroll or load more page to an equivalent paginated series, based on crawlable anchor links with href attributes, that is accessible even with JavaScript disabled. As the user scrolls or clicks, use JavaScript to adapt the URL in the address bar to the component paginated page.
To make sure Google can crawl and index your paginated content, follow these best practices: Link pages sequentially. Use URLs correctly. Avoid indexing URLs with filters or alternative sort orders.
JavaScript Pagination concept is applied for moving among the pages with First, Next, Previous and Last buttons or links. Pagination's main motto is to move among the content immediately by clicking links or buttons. Pagination has multiple links or buttons provided for access First, Next, Previous and Last content.
This is what I do for my Pagination.
$startPage = $currentPage - 4;
$endPage = $currentPage + 4;
if ($startPage <= 0) {
$endPage -= ($startPage - 1);
$startPage = 1;
}
if ($endPage > $totalPage)
$endPage = $totalPage;
if ($startPage > 1) echo " First ... ";
for($i=$startPage; $i<=$endPage; $i++) echo " {$i} ";
if ($endPage < $totalPage) echo " ... Last ";
I believe my code is self-explained, but I will try to explain it in plain English. First of all, you need to know two things before you can generate Pagination: $totalPage and $currentPage.
Step 1: Assuming that the current page is in mid-range. $startPage and $endPage store range of page that pagination try to generate.
Step 2: If $startPage is negative, then you need to make-up for $endPage.
Step 3: If $endPage excess $totalPage, then $endPage is the last page.
Step 4: Generating Pagination into HTML. (it is up to you how you want your pagination to look. I will simply use plain text to represent my pagination)
if ($startPage > 1) echo " First ... ";
for($i=$startPage; $i<=$endPage; $i++) echo " {$i} ";
if ($endPage < $totalPage) echo " ... Last ";
Fixed flaw to my previous logic
$startPage = ($curPage < 5)? 1 : $curPage - 4;
$endPage = 8 + $startPage;
$endPage = ($totalPage < $endPage) ? $totalPage : $endPage;
$diff = $startPage - $endPage + 8;
$startPage -= ($startPage - $diff > 0) ? $diff : 0;
if ($startPage > 1) echo " First ... ";
for($i=$startPage; $i<=$endPage; $i++) echo " {$i} ";
if ($endPage < $totalPage) echo " ... Last ";
This conversation was a great start for me! But I wanted a paginator closer to the intentions of the original question, that:
1) Could be contained in a function with variables to alter the total pages, current page, and number of pages on each side of the current to show.
2) Maintains a constant width, similar to the original post:
< [1] 2 3 4 5 6 7 ... 99 >
< 1 [2] 3 4 5 6 7 ... 99 >
< 1 2 [3] 4 5 6 7 ... 99 >
< 1 2 3 [4] 5 6 7 ... 99 >
< 1 2 3 4 [5] 6 7 ... 99 >
< 1 ... 4 5 [6] 7 8 ... 99 >
< 1 ... 5 6 [7] 8 9 ... 99 >
< 1 ... 92 93 [94] 95 96 ... 99 >
< 1 ... 93 94 [95] 96 97 98 99 >
< 1 ... 93 94 95 [96] 97 98 99 >
< 1 ... 93 94 95 96 [97] 98 99 >
< 1 ... 93 94 95 96 97 [98] 99 >
< 1 ... 93 94 95 96 97 98 [99] >
3) Continues to display the number "2" rather than "..." in cases where you would have 1 ... 3
4) Same thing for the end.
So here's what I did. I am coding in a different language (coffeescript), but it should function as good sudo-code anyway:
get_pages_array = (total_page, each_side, curr_page) ->
if total_page <= (2*each_side)+5
# in this case, too few pages, so display them all
start_page = 1
end_page = total_page
else if curr_page<=each_side+3
# in this case, curr_page is too close to the beginning
start_page = 1
end_page = (2*each_side)+3
else if curr_page >= total_page - (each_side+2)
# in this case, curr_page is too close to the end
start_page = total_page - (2*each_side) - 2
end_page = total_page
else
# regular case
start_page = curr_page - each_side
end_page = curr_page + each_side
return_me = []
if start_page> 1
return_me.push "1"
if start_page>2
return_me.push "..."
for x in [start_page..end_page]
return_me.push x
if end_page<total_page-1
return_me.push "..."
if end_page<total_page
return_me.push total_page
return return_me
I am using this code for each_side = 2, so that's where I'm sure it works.
EDIT: fixed logic as per @Vextil
Here's a Python program that shows how to do this correctly:
def main():
num_pages = 13
page = 12
window = 5
start = page - window
end = page + window - 1
if start <= 0:
end = end - start + 1
start = 1
if end > num_pages:
end = num_pages
start = max(end - (window * 2) + 1, 1)
for no in range(start, end + 1):
print "{}*".format(no) if page == no else no
if __name__ == '__main__':
main()
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With