使用过滤功能更改上一页和旁边的分页工作

Question

我使用此jsfiddle代码并尝试更改为以下要求。

1. 更改＆＃34; prev＆＃34;和＆＃34; next＆＃34;按钮分页（例如1 2 3 4 and so on）
2. 显示＆＃34;类别1＆＃34;第一页上的内容而不是显示所有内容

这是我更改为分页的代码，但我不确定如何将其与过滤功能结合使用。并且还不确定如何显示＆＃34;类别1＆＃34;第一页上的内容。希望你们中的一些人可以给我一些建议。谢谢！

请注意过滤功能。

＆＃13;
＆＃13;
var visible = "";

$('div.filter').delegate('a', 'click', function (event) {
  visible = '.' + this.href.slice(this.href.indexOf("#") + 1);
    //$('ul.items li').hide().filter(visible).show();
    pagination();
  event.preventDefault();
});

pageSize = 5;
var i = 1;
showPage = function(page) {
    $("li").hide();
    $("li").each(function(n) {
        if (n >= pageSize * (page - 1) && n < pageSize * page)
            $(this).show();
    });        
}

showPage(i);

function pagination(action) {

    var pages = Math.ceil($('li').length / pageSize) 
    for (var i = 0; i<pages; i++) {
       $('#pager').append('<a href="#" class="pageClick">'+(i+1)+'</a> &nbsp;');
    }
    $('.pageClick').on('click', function(e) {
       e.preventDefault();
       showPage($(this).index()+1);
    });

}

pagination();
＆＃13;
ul{list-style: none;}

#item-wrapper {
 width:250px;   
 margin:30px 0 0 30px;
}
.items li {
 font-family:arial;
font-size:13px;
 background-color:#ccc;
margin-bottom:1px; 
padding:5px;    
}
.ctrl-nav {
    background-color:#999;
    padding:5px;
    overflow:hidden;
}
.ctrl-nav a {
    font-family:arial;
font-size:13px;
    padding:5px 10px;
    color:#fff;
}
.ctrl-nav a#prev{
 float:left;   
}
.ctrl-nav a#next{
 float:right;   
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter">
    <a href="#category-1">category 1</a>
    <a href="#category-2">category 2</a>
</div>

<div id="item-wrapper">
<ul class="items">
    <li class="category-1">item 1</li>
    <li class="category-1">item 2</li>
    <li class="category-1">item 3</li>
    <li class="category-1">item 4</li>
    <li class="category-1">item 5</li>
    <li class="category-1">item 6</li>
    <li class="category-2">item 7</li>
    <li class="category-2">item 8</li>
    <li class="category-2">item 9</li>
    <li class="category-2">item 10</li>
    <li class="category-2">item 11</li>
    <li class="category-2">item 12</li>
    <li class="category-1">item 13</li>
    <li class="category-1">item 14</li>
    <li class="category-2">item 15</li>
</ul>

<div id="pager"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 1

你可以先隐藏所有的li，然后显示$（可见）。同样在您的分页功能中，只需在开始时添加$('#pager').html("")，这样您就不会重复数字。 不确定你要做什么，但你可能想改变你的分类逻辑分类。

＆＃13;

＆＃13;

var visible = "";
var liToShow = $('li');
$('div.filter').delegate('a', 'click', function (event) {
  visible = '.' + this.href.slice(this.href.indexOf("#") + 1);
$('ul.items li').hide();
$(visible).show();
liToShow = $(visible);
pagination();
  event.preventDefault();
});

pageSize = 5;
var i = 1;
showPage = function(page) {
$("li").hide();
$("li").each(function(n) {
    if (n >= pageSize * (page - 1) && n < pageSize * page)
        $(this).show();
});        
}

showPage(i);

function pagination(action) {

var pages = Math.ceil(liToShow.length / pageSize);
$('#pager').html("");
for (var i = 0; i<pages; i++) {
   $('#pager').append('<a href="#" class="pageClick">'+(i+1)+'</a> &nbsp;');
}
$('.pageClick').on('click', function(e) {
   e.preventDefault();
   showPage($(this).index()+1);
});

}

pagination();

＆＃13;

ul{list-style: none;}

#item-wrapper {
 width:250px;   
 margin:30px 0 0 30px;
}
.items li {
 font-family:arial;
font-size:13px;
 background-color:#ccc;
margin-bottom:1px; 
padding:5px;    
}
.ctrl-nav {
    background-color:#999;
    padding:5px;
    overflow:hidden;
}
.ctrl-nav a {
    font-family:arial;
font-size:13px;
    padding:5px 10px;
    color:#fff;
}
.ctrl-nav a#prev{
 float:left;   
}
.ctrl-nav a#next{
 float:right;   
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter">
    <a href="#category-1">category 1</a>
    <a href="#category-2">category 2</a>
</div>

<div id="item-wrapper">
<ul class="items">
    <li class="category-1">item 1</li>
    <li class="category-1">item 2</li>
    <li class="category-1">item 3</li>
    <li class="category-1">item 4</li>
    <li class="category-1">item 5</li>
    <li class="category-1">item 6</li>
    <li class="category-2">item 7</li>
    <li class="category-2">item 8</li>
    <li class="category-2">item 9</li>
    <li class="category-2">item 10</li>
    <li class="category-2">item 11</li>
    <li class="category-2">item 12</li>
    <li class="category-1">item 13</li>
    <li class="category-1">item 14</li>
    <li class="category-2">item 15</li>
</ul>

<div id="pager"></div>
</div>

＆＃13;

＆＃13;

＆＃13;