Question

我正在网站上进行分页，我让一切正常，但我无法理解分页数字的行为（以及实现）用点显示。现在我在列表中显示我的所有数字，如果是当前页面，则给出活动类：

displayNumbers : function(numbPages, page){
            let pagEl = jQuery('.pagination__list');
            pagEl.empty();

            for( let i = 1; i <= numbPages; i++){
                let pageNumb = i;

                if(pageNumb === page) {
                    jQuery(pagEl).append(`<li class="active" data-numb="${pageNumb}">${pageNumb}</li>`);
                } else {
                    jQuery(pagEl).append(`<li data-numb="${pageNumb}">${pageNumb}</li>`);
                }
            }
        },

该函数的调用方式如下：

app.pagination.displayNumbers(app.numbPages, page);

其中app.numbPages是我总共有多少页数，page是当前页面。

我想要实现的是：

1 | 2 | 3 | ... | 28 | 29 | 30

但行为如何？我也很难找到例子，因为现在网站大多使用无限滚动。无论如何，我想我会有类似的东西：

1 | 2 | 3 | 4 |... | 29 | 30

但如果我有第8页的例子会发生什么？

... | 6 | 7 | 8 | ... | 29 | 30 或者

1 | 2| ... | 7 | 8 | ... | 29 | 30 我不会欺骗任何这些，我想坚持最大1 ...，但如果通常这样做，我会这样做。

并且任何实现提示（普通的javascript或jquery）是非常受欢迎的

Answer 1

大多数网站不做多个...，使用＆lt;和＆gt;最后显示有更多页面可用。

所以代替： ... | 6 | 7 | 8 | ... | 29 | 30

会的 < | 6 | 7 | 8 | ... | 29 | 30

某些网站最后也使用双箭头（＆lt;＆lt;＆gt;＆gt;），表示跳过第一页或最后一页的能力。虽然经常显示，但这些在不可用时会变灰。

<< | < | 6 | 7 | 8 | ... | 29 | 30 | >>

Answer 2

感谢大家的建议。我最终使用了一个插件，因为有太多小东西需要照顾，我没有时间去做，我也觉得重新发明轮子并不那么聪明。

如果您需要标准分页，我发现simplePagination相当不错。很简单，您可以根据需要自定义您的CSS，但您无权访问您的HTML。

有一个函数onPageClick可以控制显示新页面时发生的所有事情（所以新页面，下一页，上一页）。我很容易集成到已经完成的OOP代码中。

希望这对其他人有帮助。

在Javascript中的分页编号之间添加点

2 个答案: