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

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

我没有添加实际的代码,因为你已经有了.但是在这里,您会看到有三个选项:如果前一个元素已经是省略号,则显示页面,显示省略号或显示新内容.

只需在上面插入所需的HTML输出//comment lines,你应该好好去:)

注意:我做了第4个选项(对于当前页面),因为您通常希望将其呈现为不可点击的项目.