Logic behind pagination like google

问题:

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 .= '&hellip;';  //  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 .= '&hellip;';  //  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; 
}

回答1:

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 ";

回答2:

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

回答3:

This is pure awesome! I think I got this paginator to work the way I described.
Please, have a look and try it out here http://dev.thomaskile.me/?page=test-zone&module=Paginator and let me know...

After a lot of logical math studying I finally came to this conclusion:
In order to make this act so differently on different levels, there have to be some if, elsef-s to handle the logic on each level seperatly. I'll try to explain, but find it hard to do in a good way...

These are the levels I'm talking about:

• If currentPage == firstPage :
  Calculate how many pages to show after currentPage starting from 2nd page.
  This calculation needed to be done based on how many page boxes there would be at the most. (midRange value is a key factor here)

  [1] 2   3    4    5    6    7    8   ...   184   >
  

• elseif currentPage is in between firstPage and midRange value maxed out.
  Reduce pages in range by one to prevent moving the whole paginator to the right once prevPage is added. Calculate pages to show before and after currentPage to keep the amount of pages equal trough the whole thing.

  <   1  [2]   3    4    5    6    7   ...   184   >
  <   1   2   [3]   4    5    6    7   ...   184   >
  <   1   2    3   [4]   5    6    7   ...   184   >
  

• elseif midRange value is maxed out on each side. Meaning we're in the middle somewhere.
  midRange pages + the current page + midRange pages. Quite straight forward i guess...

  <   1  ...   3    4   [5]   6    7   ...   184   >
                        ...
                        ...
                        ...
  <   1  ...  178  179 [180] 181  182  ...   184   >
  

• elseif currentPage is in between midRange value and lastPage
  Almost the same as in the beginning. Difference was to calculate a static pagenumber to start pages from, then calculate pages to show before/after current page...
  (this, by the way, has been my headache this weekend)

  <   1  ...  178  179  180 [181] 182  183   184   >
  <   1  ...  178  179  180  181 [182] 183   184   >
  <   1  ...  178  179  180  181  182 [183]  184   >
  

• elseif currentPage == numPages (number of tatal pages). Pretty much same as firstPage operation... calculating how many pages needed to fill the whole thing up and calculate where to start from...

What I need to do now is to make the code itself better...

    <   1  ...  178  179  180  181  182  183  [184]  >

The "problem" in my case was that the whole paginator should calculate everything based on the midRange value and nothing else. For me to execute this paginator in any of my future project, all I have to do is:

    $paginator = new paginator((int));  //  e.g. number of total results from a db request

I might in most cases need to add a personal querystring to make sure the a href is working:

    $paginator->set_queryString('my querystring');

And that's pretty much all. I've set up a couple of optional functions like this:

    $paginator->set_resultsPerPage((int));
    $paginator->set_midRange((int));
    $paginator->set_pageIdentifier('querystring-pageNumber-identifier-name-for-get');  //  whatever I needed

Finally i display the paginator page controller like this:

    $paginator->pageController('full');  //  full, med, min for different styles.

If non of these are good enough, i could just call each button like this:

    $paginator->prevPage();
    $paginator->firstPage();
    $paginator->listPages();
    $paginator->lastPage();
    $paginator->nextPage();
    $paginator->pageJumper();
    $paginator->perPageSelector();

回答4:

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()

回答5:

I assume your pagination have this structure:

number_of_active_page + separate(...) + page(184) + next_page(>)

You can set number_of_active_page become 8 ( include prev_page(<) + pages ( ... and page number )

[1]  2   3   4   5   6   7   8         ...     184       >

[number_of_active_page(set to 8)] + separate + page + next_page  

 <   1  ...  3   4  [5]  6   7         ...     184       >

回答6:

Hear is a simple example of pagination display:

$paginationDisplay = ""; // Initialize the pagination output variable
// This code runs only if the last page variable is not equal to 1, 
// if it is only 1 page we require no paginated links to display
if ($lastPage != "1"){
  // This shows the user what page they are on, and the total number of pages
  $paginationDisplay .= 'Page <strong>' . $pn . 
            '</strong> of ' . $lastPage. 'last';
  // If we are not on page 1 we can place the Back button
  if ($pn != 1) {
     $previous = $pn - 1;
     $paginationDisplay .=  '&nbsp;  <a href="' . 
            $_SERVER['PHP_SELF'] . '?pn=' . $previous . '"> Back</a> ';
    } 
    // Lay in the clickable numbers display here between the Back and Next links
    $paginationDisplay .= '<span>' . $centerPages . '</span>';
    // If we are not on the very last page we can place the Next button
    if ($pn != $lastPage) {
        $nextPage = $pn + 1;
        $paginationDisplay .=  '&nbsp;  <a href="' . 
            $_SERVER['PHP_SELF'] . '?pn=' . $nextPage . '"> Next</a> ';
    } 
}

回答7:

This is the pagination logic I have

$pLinks = 5; // Links per page 
$pMids = 3;  
$pTot = 10; // Total page 
$pSel = 1  // Selected page 

if (($pSel <= $pMids) || ($pTot <= $pLinks)) {
    $sPage = 1;                
    $ePage = ($pTot <= $pLinks) ? $pTot : $pLinks;
} else {
    $etPage = $pSel + ($pMids - 1);            
    $ePage = ($etPage <= $pTot) ? $etPage : $pTot;            
    $sPage = $ePage - ($pLinks - 1);            
}

if ($pSel > $sPage) {
    $sL = '<a href="#" id="1">First</a>';
    $sN = '<a href="#" id="'.($pSel-1).'">&laquo;</a>';
} else {
    $sL = 'First';
    $sN = '&laquo;';
}

if ($pSel < $ePage) {
    $eL = '<a href="#" id="'.$pTot.'">End</a>';
    $eN = '<a href="#" id="'.($pSel+1).'">&raquo;</a>';
} else {
    $eL = 'End';
    $eN = '&raquo;';
}

$pOptions = '';

$pOptions .= '<span class="iPage">'.$pSel.'/'.$pTot.'</span>';
$pOptions .= '<span class="renderFL">'.$sL.'</span>';
$pOptions .= '<span class="renderPN">'.$sN.'</span>';

for ($i = $sPage; $i <= $ePage; $i++) {
    if($i != $pSel) {
        $pOptions .= '<span><a href="#" id="'.$i.'">'.$i.'</a></span>';
    } else {
        $pOptions .= '<span class="selected">'.$i.'</span>';
    }
}

$pOptions .= '<span class="renderPN">'.$eN.'</span>';
$pOptions .= '<span class="renderFL">'.$eL.'</span>';

The result would be look like this:

1  -> [1] 2 3 4 5
2  -> 1 [2] 3 4 5
3  -> 1 2 [3] 4 5
..
5  -> 3 4 [5] 6 7
6  -> 4 5 [6] 7 8
..
8  -> 6 7 [8] 9 10
9  -> 6 7 8 [9] 10
10 -> 6 7 8 9 [10]