分页逻辑：插入，而不是中间页......当有大量的页面 [英] Pagination logic : Inserting ... instead of middle pages when there are lots of pages

问题描述

我想创建我的网站上的最新消息节一些分页。我已经成功地实际得到的页面导航工作，使每个页面都是在屏幕底部的输出和下一个和previous按钮，不过，我也想试试，减少的时候，我们有分页字段的大小大量的整体页面。考虑到这一点我想尝试和模仿的以下行为：

I am trying to create some pagination on the latest news section of my site. I've managed to actually get the page navigation working so that each page is output at the bottom of the screen along with next and previous buttons however, I also want to try and reduce the size of the pagination field when we have a large number of pages overall. With this in mind I want to try and mimic the following behaviour:

When the total number of pages is less than 7, output the pagination as:

    <Previous> 1 2 3 4 5 6 7 <Next>

However, if the total number of pages is not less than 7, output only the first 2
pages, the last 2 pages and the 2 pages either side of the current page as well
as the link for the current page. In place of the missing page, there should be
a single ...

我已经成功使用下面的code以获得对这一水煤浆某种方式：

I've managed to get some way towards this behavour using the following code:

@if (totalPages > 1){
  <ul class="pager">
    @if (page > 1){
      <li><a href="?page=@(page-1)">Previous</a></li>
    }
    @for (int p = 1; p < totalPages + 1; p++){
      var linkClass = (p == page) ? "disabled" : "active";
      if ((p >= page - 2 && p <= page + 2 || p <= 2 || p >= totalPages -2) 
          || totalPages <= 7){
            <li class="@Html.Raw(linkClass)">
              <a href="?page=@p">@p</a>
            </li>
      }          
    }

    @if (page < totalPages){
        <li><a href="?page=@(page+1)">Next</a></li>
    }
  </ul>
}

然而，主要的部分，我现在在努力的是如何输出一个......在不符合条件的网页的地方。我可以很容易地输出多种...用的，如果条件的其他标准，但是这不是我要找的行为。

However, the main part I am now struggling with is how to output a single ... in the place of the pages that do not match the criteria. I can easily output multiple ... using an else criteria on the if condition but this is not the behaviour I am looking for.

任何帮助将是很大的AP preciated。

Any help would be greatly appreciated.

推荐答案

有轻微的另一种方式，规则你提到变得更容易理解。

With a slight rephrase, the rules you mentioned become easier to understand.

下面的规则集是等价的：

The following ruleset is equivalent:

Any page number that is either the 
    first, 
    second, 
    second before current, 
    first before current, 
    current, 
    first after current, 
    second after current, 
    second to last, 
    or last page  
should be displayed. Any other page should be an ellipsis.

在code制定出来，这成为：

Worked out in code, this becomes:

//Note: I'm addressing the pages as a 1-based index. 
//If 0-based is needed, just add -1 to all index values

bool previousPageIsEllipsis = false;

for(int i = 1; i <= totalpages; i++)
{
    if(i == currentpage) {
        //Print current page number

        previousPageIsEllipsis = false;
    }
    else
    {
        if( i == 1
            || i == 2
            || i == currentpage - 2
            || i == currentpage - 1
            || i == currentpage + 1
            || i == currentpage + 2
            || i == totalpages - 1
            || i == totalpages)
        {
            //Print a visible link button

            previousPageIsEllipsis = false;
        }
        else
        {
            if(previousPageIsEllipsis)
            {
                //an ellipsis was already added. Do not add it again. Do nothing.
                continue;
            }
            else
            {
                //Print an ellipsis
                previousPageIsEllipsis = true;
            }
        }
    }
}

我没加实际code，因为你已经。但在这里，你看到有三个选择：要么显示页面，显示一个省略号，或显示无新意，如果previous元素已经是一个省略号

I did not add the actual code, because you have that already. But here, you see there are three options: either show the page, show an ellipsis, or show nothing new if the previous element is already an ellipsis.

只要插入的所需的HTML输出//注释行，你应该是好去：）

Just insert the needed HTML output on the //comment lines and you should be good to go :)

注：我做了一个第四选项（当前页面），因为你通常要呈现，作为一个非点击项目的

这篇关于分页逻辑：插入，而不是中间页......当有大量的页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！