使用类别过滤器添加数字分页-javascript

在javascript中，我有一个项目列表，一些项目属于类别1，另一些属于类别2。我们有一个过滤器来显示类别1和类别2的项目

我们有“上一个”和“下一个”按钮在项目之间导航。很好用

所以，我想在分页中显示数字1，2，3。。。导航。这些数字介于“上一步”和“下一步”按钮之间。 有人有主意吗

在JSFIDLE上演示：

var-visible=”“；
$（'div.filter'）。委托（'a'，'click'，函数（事件）{
visible='..+this.href.slice（this.href.indexOf（“#”）+1）；
分页（）；
event.preventDefault（）；
});
var itemsNumber=4；
var min=0；
var max=项目数量；
函数分页（操作）{
var totalItems=$（“li”+可见）。长度；
$（“#下一步”）.show（）；
$（'#prev'）.show（）；
if（max0）{//如果最小值小于0，则停止操作
如果（动作==“上一步”）{
最小=最小-项目数目；
max=max-itemsNumber；
}
}
如果（最大值>=totalItems）
$（“#下一步”）.hide（）；
if（min我认为实现这一点最简单的方法是使用一个变量跟踪您所在的页面，并在每次调用
pagination（）
时更新它

因此，当操作为“
next
”时，向变量添加一个，当操作为“
prev
”时，删除一个

您可以在“下一步”和“上一步”按钮之间添加新元素，并在调用“pagination（）”时将文本更新到当前页面。
我认为实现这一点的最简单方法是使用一个变量跟踪您所在的页面，并在每次调用
pagination（）
时更新它

因此，当操作为“
next
”时，向变量添加一个，当操作为“
prev
”时，删除一个

您可以在“下一步”和“上一步”按钮之间添加新元素，并在调用“pagination（）”时将文本更新到当前页面。
据我所知，您需要的是在链接之间进行分页，以下是我的方法，您可以获得：


var itemsNumber=4，$items，pages=1，current=1；
函数makePages（）{
$items=$（“ul.items li:可见”）；
pages=Math.ceil（$items.length/itemsNumber）；
$（“#页”）.empty（）；
对于（var p=1；p0）{
电流=+动作；
}
如果（当前=页数）{
当前=页数；
}
显示页面（当前）；
});
$（'div.filter'）。在（'click'，'a'，function（）上{
变量选择器=$（this.attr（'href'）.replace（“#“，”）；
$（“ul.items li”）.show（）.not（选择器）.hide（）；
makePages（）；
})；


第1项
第2项
第3项
第4项
第5项
第6项
第7项
第8项
第9项
第10项
第11项
第12项
第13项
第14项
第15项

据我所知，您需要的是在链接之间进行分页，以下是我的方法，您可以获得：


var itemsNumber=4，$items，pages=1，current=1；
函数makePages（）{
$items=$（“ul.items li:可见”）；
pages=Math.ceil（$items.length/itemsNumber）；
$（“#页”）.empty（）；
对于（var p=1；p0）{
电流=+动作；
}
如果（当前=页数）{
当前=页数；
}
显示页面（当前）；
});
$（'div.filter'）。在（'click'，'a'，function（）上{
变量选择器=$（this.attr（'href'）.replace（“#“，”）；
$（“ul.items li”）.show（）.not（选择器）.hide（）；
makePages（）；
})；


第1项
第2项
第3项
第4项
第5项
第6项
第7项
第8项
第9项
第10项
第11项
第12项
第13项
第14项
第15项

我做了一个函数来添加数字。但是我不知道怎么做。我已经将div元素ctrl nav更改为“
”。我做了一个函数：函数number_pagination（）{$（'.'pagin'）.html（''）；var pageCount=$（可见）。length/itemsNumber；$（“#pagin”）。append（'
）；例如（var i=0；数字显示正确。但是如何向每个数字添加事件单击？如何根据单击的数字对页面进行切片？谢谢！@Marcel您可以向每个数字添加一个类，并通过在“append”函数中添加该类，为“href”属性赋予数字本身的值，然后将其添加到jquery:“jquery（“类名”）。单击（function（）{showList（$（this.href））；}）；'showList函数将在页面上显示正确的项目