我想显示一个有限的编号。页面链接，例如 10 个链接中的 5 个，并且想知道是否有任何已知或经过验证的方法来实现这一点。
假设用户现在可以看到以下链接
上一个、1（选定）、2、3、4、5...下一个
用户点击，比如说 4，现在他看到了
上一个... 3、4（选定）、5、6、7...下一个
现在他点击了 7
上一个... 6, 7(已选择), 8, 9, 10...下一个
现在我相信这在分页编程中很常见。那么是否有任何已知的算法可以做到这一点。我懒得自己做饭了！
编辑：- 这需要在服务器端实现。我正在研究 C#，但是您可以使用任何语言输入算法。
【问题讨论】：
标签： html pagination
在小型（移动）设备上，我不得不将寻呼机上的页面链接数量限制为 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');
}
}【讨论】：
一些答案的问题，尤其是 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
}
【讨论】：
一些答案的问题，尤其是 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) + '">< Previous</a>').appendTo(navElement);
}
navElement 是一个 jQuery 对象，您希望将列表附加到喜欢的位置：$('#pagination-nav');
希望这对某人有所帮助！
干杯
【讨论】：
对此进行了测试，即使它可能更优雅一点，它也能正常工作。我在这里使用 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
}
【讨论】：
您不能仅使用 HTML 来做到这一点。您必须使用 PHP 或 javascript（或其他脚本语言）来生成链接。
【讨论】：