更改prev和旁邊的分頁工作，具有篩選功能

Question

我正在使用此jsfiddle代碼並嘗試更改爲以下要求。

1. 改變「上一頁」和「下一步」按鈕分頁（如1 2 3 4 and so on）
2. 顯示第一頁，而不是表演的「1類」內容的所有內容

這是代碼我已更改爲分頁，但我不確定如何將其與過濾功能結合使用。也不確定如何在第一頁上顯示「第1類」內容。希望你們中的一些人能夠向我提供一些建議。謝謝！

請注意濾波功能。

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();

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; 
 
}

<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>

Answer 1

可以先隱藏所有的李再秀$（可見）。同樣在你的分頁功能中，只需在開始處添加$('#pager').html("")，這樣就不會重複數字。 不確定你想要做什麼，但你可能想改變你的分類邏輯的類別。

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();

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; 
 
}

<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>