html - 显示有限编号分页中的页面链接

Question

我想显示一个有限的编号。页面链接的数量，比如说 10 个链接中的 5 个，并且想知道是否有任何已知的或经过试验和测试的方法来实现这一点。

假设用户现在可以看到以下链接

上一个，1(已选)，2、3、4、5……下一个

用户点击，比如说 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');

希望这对某人有帮助!

干杯