37

Google のページネーション動作の背後にあるロジックは何ですか?

私のページネーターは次のようになります。

[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   >

上記の例の実際のバージョンは次のとおりです: http://www.dev.thomaskile.me/?page=test-zone&module=Paginator
なぜこれが起こっているのか知っています。現在のページの両側に表示されるページ番号の数を 2 に設定しました。

次のように、数値の範囲を等しくしたいと思います。

[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   >

始めと終わりでちょっと変えたいのですが、どうすれば簡単に操作できるようになるのかわからず…
柔軟に対応したいと思います。つまり、各面で必要なページ数を変更し、スクリプトを展開してすべて計算できるようにしたいと考えています...

これまでの私のコードは次のとおりです。

/**
 *  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; 
}
4

7 に答える 7

48

これは、ページネーションのために私が行うことです。

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

私のコードは自明だと思いますが、平易な英語で説明しようと思います。まず、ページネーションを生成する前に、 $totalPage$currentPageという 2 つのことを知っておく必要があります。

ステップ 1 : 現在のページがミッドレンジにあると仮定します。$startPage と $endPage は、ページネーションが生成しようとするページの範囲を格納します。

ステップ 2 : $startPageが負の場合、 $endPage を補う必要があります

ステップ 3 : $endPage が $totalPage を超える場合$ endPageが最後のページです。

ステップ 4 : ページネーションを HTML に生成します。(ページネーションをどのように表示するかはあなた次第です。ここでは単純にプレーン テキストを使用してページネーションを表します)

if ($startPage > 1) echo " First ... ";
for($i=$startPage; $i<=$endPage; $i++) echo " {$i} ";
if ($endPage < $totalPage) echo " ... Last ";

以前のロジックの欠陥を修正

$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 ";
于 2012-06-30T13:05:00.077 に答える
6

この会話は私にとって素晴らしいスタートでした!しかし、私は元の質問の意図に近いページネーターが欲しかった
.
2)元の投稿と同様に、一定の幅を維持します:

 <  [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) 数字が 1 ~ 3 の場合、「...」ではなく「2」を表示し続けます。
4) 最後も同じです。

だからここに私がやったことです。私は別の言語 (coffeescript) でコーディングしていますが、とにかく良い sudo コードとして機能するはずです:

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

each_side = 2 にこのコードを使用しているので、確実に機能します。

編集: @Vextil に従ってロジックを修正

于 2015-08-05T15:10:40.253 に答える
1

これを正しく行う方法を示す Python プログラムを次に示します。

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()
于 2016-10-18T19:09:54.083 に答える
1

これは純粋に素晴らしいです!私が説明したように、このページネーターを機能させたと思います。http://dev.thomaskile.me/?page=test-zone&module=Paginator
を 見て、試してみてください...

多くの論理数学の研究の後、私は最終的にこの結論に達しました。
これをさまざまなレベルで非常に異なる方法で実行するには、各レベルのロジックを個別に処理するためにいくつかのif, elsef-s が必要です。説明しようと思いますが、うまく説明するのは難しいと思います...

これらは私が話しているレベルです:

  • If currentPage == firstPage : currentPage
    の後に表示するページ数を 2 ページ目から計算します。
    この計算は、ページ ボックスの最大数に基づいて行う必要がありました。(ここでは midRange 値が重要な要素です)

    [1] 2   3    4    5    6    7    8   ...   184   >
    
  • そうでない場合、 currentPage はfirstPage と midRange の値の間にあります。
    prevPage が追加されると、ページネーター全体が右に移動しないように、範囲内のページを 1 つ減らします。currentPage の前後に表示するページを計算して、ページの量が全体で等しくなるようにします。

    <   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 値は両側で最大になります。つまり、私たちはどこかの真ん中にいます。
    midRange ページ + 現在のページ + midRange ページ。かなり簡単だと思います...

    <   1  ...   3    4   [5]   6    7   ...   184   >
                          ...
                          ...
                          ...
    <   1  ...  178  179 [180] 181  182  ...   184   >
    
  • elseif currentPage がmidRange 値と lastPageの間に
    ある場合 最初とほぼ同じ。違いは、ページを開始する静的なページ番号を計算し、現在のページの前後に表示するページを計算することでした...
    (ちなみに、これは今週末の私の頭痛の種でした)

    <   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 (合計ページ数)。firstPage 操作とほとんど同じです...全体を埋めるために必要なページ数を計算し、どこから開始するかを計算します...

私が今しなければならないことは、コード自体をより良くすることです...

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

私の場合の「問題」は、ページネーター全体が midRange 値に基づいてすべてを計算し、他には何も計算しないことでした。将来のプロジェクトでこのページネーターを実行するには、次のことを行う必要があります。

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

ほとんどの場合、が機能していることを確認するために、個人的なクエリ文字列を追加する必要がありますa href

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

そして、それはほとんどすべてです。次のようないくつかのオプション機能を設定しました。

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

最後に、次のようにページネーター ページ コントローラーを表示します。

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

これらのどれでも十分でない場合は、次のように各ボタンを呼び出すことができます。

    $paginator->prevPage();
    $paginator->firstPage();
    $paginator->listPages();
    $paginator->lastPage();
    $paginator->nextPage();
    $paginator->pageJumper();
    $paginator->perPageSelector();
于 2012-07-01T20:02:52.400 に答える
0

あなたのページネーションはこの構造を持っていると思います:

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

number_of_active_page を 8 に設定できます ( prev_page(<) + pages ( ... および page number ) を含める)

[1]  2   3   4   5   6   7   8         ...     184       >
[number_of_active_page(8 に設定)] + 個別 + ページ + 次のページ  
 <   1  ...  3   4  [5]  6   7         ...     184       >
于 2012-06-30T08:55:14.817 に答える
-1

Hearは、ページ付け表示の簡単な例です。

$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> ';
    } 
}
于 2012-07-01T18:05:47.317 に答える
-1

これは私が持っているページネーションロジックです

$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>';

結果は次のようになります。

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]
于 2012-07-12T10:47:54.433 に答える