分页逻辑：当页面很多时插入 ... 而不是中间页面

Question

我正在尝试在我网站的最新新闻部分创建一些分页。我已经设法让页面导航真正工作，以便每个页面与下一个和上一个按钮一起输出到屏幕底部但是，当我们有大量时，我也想尝试减小分页字段的大小总页数。考虑到这一点，我想尝试模仿以下行为：

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

我已经设法使用以下代码来实现这种行为：

@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>
}

但是，我现在苦苦挣扎的主要部分是如何输出单个 ... 来代替不符合条件的页面。我可以轻松地输出多个 ... 在 if 条件上使用 else 标准，但这不是我正在寻找的行为。

任何帮助将不胜感激。

Answer 1

稍微改写一下，你提到的规则就更容易理解了。

以下规则集是等价的：

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.

用代码解决，变成：

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

我没有添加实际代码，因为您已经有了。但是在这里，您会看到三个选项：显示页面，显示省略号，或者如果前一个元素已经是省略号，则不显示任何新内容。

只需在//comment lines 上插入所需的 HTML 输出就可以了 :)

注意：我做了第 4 个选项（针对当前页面），因为您通常希望将其呈现为不可点击的项目。