Question

我想要显示有限的号码。页面链接，比如10个链接中的5个，并且想知道是否有任何已知或经过试验和测试的方法来实现此目的。

所以我们可以说用户现在可以看到以下链接

previous，1（selected），2,3,4,5 ...... next

用户点击，比如4，现在他看到了

之前... 3,4（已选中），5,6,7 ...下一步

现在他点击了7

之前... 6,7（已选中），8,9,10 ...下一步

现在我相信这是分页编程中非常常见的东西。那么有任何已知的算法可以做到这一点。我觉得我懒得自己做饭！

编辑： - 这需要在服务器端实现。我正在研究C＃，但你可以使用任何语言进行算法。

Answer 1

一些答案的问题，尤其是Tyrone的答案是，它只在剩余部分为0时更新导航，如果你想在每次点击时更新，那么以下情况要好得多：

var start,
end,
pagesCutOff = 5, 
ceiling = Math.ceil(pagesCutOff / 2),
floor = Math.floor(pagesCutOff / 2);

if(numPages < pagesCutOff) {
    start = 0;
    end = numPages;
} else if(currentPage >= 1 && currentPage <= ceiling) {
    start = 0;
    end = pagesCutOff;
} else if((currentPage + floor) >= numPages) {
    start = (numPages - pagesCutOff);
    end = numPages;
} else {
    start = (currentPage - ceiling);
    end = (currentPage + floor);
}

显然你通过currentPage和numPages自己发送函数，这将使当前页面保持在分页列表的中心，显示的按钮数应该是一个奇数，这样所选页面可以“在中间”列表。

然后您可以执行以下循环：

for (var i = start; i < end; i++) {
    //Your code here
}

如果您想为此添加下一个和上一个按钮，请执行以下操作：

        if(currentPage !== 1) {
            $('<a href="javascript:void(0);" class="paginate-link" rel="' + (parseInt(currentPage) - 1) + '">&lt; Previous</a>').appendTo(navElement);
        }

其中navElement是一个jQuery对象，您希望将列表附加到：$（'＃pagination-nav'）;

希望这有助于某人！

干杯

Answer 2

对此进行了测试，即使它可以更优雅一点也能正常工作。我在这里使用C＃，但任何语言的逻辑应该是相同的。如果您想出更好的解决方案，请发布。如果您有任何疑问，请发布到。我已经对代码进行了评论，以帮助更好地解释发生了什么。

        //Get the current page we are on
        int start = currentPage;
        int end = currentPage;

        //If the page cannot be devised by 5 enter the loop
        if ((start % 5 != 0) && (end % 5 != 0))
        {
            //Get the next nearest page that is divisible by 5
            while ((end % 5) != 0)
            {
                end++;
            }

            //Get the previous nearest page that is divisible by 5
            while ((start % 5) != 0)
            {
                start--;
            }
        }
        //The page is divisible by 5 so get the next 5 pages in the pagination
        else
        {
            end += 5;
        }
        //We are on the first page
        if (start == 0)
        {
            start++;
            end++;
        }
        //We are on the last page
        if (end == lastpage)
        {
            end = lastpage;
        } 

        //Post your pagination links below
        for (int i = start; i < end; i++)
        {
           //Your code here
        }

Answer 3

查看jQuery和分页插件......

http://plugins.jquery.com/project/pagination

Answer 4

一些答案的问题，尤其是Tyrone的答案是，它只在剩余部分为0时更新导航，如果你想在每次点击时更新，那么以下情况要好得多：

   //Get the current page we are on
    int start = currentPage;
    int end = currentPage;

    //If the page cannot be devised by 5 enter the loop
    if ((start % 5 != 0) && (end % 5 != 0))
    {
        //Get the next nearest page that is divisible by 5
        while ((end % 5) != 0)
        {
            end++;
        }

        //Get the previous nearest page that is divisible by 5
        while ((start % 5) != 0)
        {
            start--;
        }
    }
    //The page is divisible by 5 so get the next 5 pages in the pagination
    else
    {
        end += 5;
    }
    //We are on the first page
    if (start == 0)
    {
        start++;
        end++;
    }
    //We are on the last page
    if (end == lastpage)
    {
        end = lastpage;
    } 

    //Post your pagination links below
    for (int i = start; i < end; i++)
    {
       //Your code here
    }

Answer 5

仅使用HTML无法做到这一点。您必须使用PHP或javascript（或其他一些脚本语言）来生成链接。

Answer 6

在小型（移动）设备上，我不得不将寻呼机上的页面链接数量限制为3个。我使用以下代码来实现它。

//If it is full page, pager
//Assume all page links are visible
//Get the actual pages links count
var noOfPages = $('ul.pagination li.pager__item').not('.pager__item--first, .pager__item--previous,.pager__item--last, .pager__item--next').length;

var pages = [];
if (noOfPages > 3) {
  var activePage = 0;
  var index = 0;
  $('ul.pagination li.pager__item').not('.pager__item--first, .pager__item--previous,.pager__item--last, .pager__item--next').each(function() {
    //Get the active page no.
    if ($(this).hasClass('current')) {
      activePage = index;
    }
    //Hide page link
    $(this).css('display', 'none');
    pages.push($(this));
    index++;
  });


  var start;
  var end;
  //We are at page 1 (i.e page=0)
  if(activePage == 0) {
    start = 0;
    end = 2;
  }
  // Wer are at last page
  else if(activePage == noOfPages - 1) {
    start = activePage - 2;
    end = activePage;
  }
  else {
    start = activePage - 1;
    end = activePage + 1;
  }

  for (var i = start; i <= end; i++) {
    pages[i].css('display', 'inline-block');
  }

}

显示限制编号。分页中的页面链接

6 个答案: