如何分頁這個jquery過濾器

Question

我希望你能幫我this code。我試圖分頁列表的記錄必須工作時，我過濾內容或不。

HTML

<div class="filter"> 
    <a href="#category-1">category 1</a> 
    <a href="#category-2">category 2</a> 
</div> 
<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> 
</ul> 


<a href="#">Next</a> <a href="#">Previous</a> 

JS：

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

所以這是我的問題：

1. 分頁將每6條（查看第6李當我點擊的「下「 其他）。

2. 當我點擊一個類別時，分頁只是適用於我用來過濾記錄的類，所以如果我按「下一個」或「前一個」，這隻需顯示選定的類別。

請隨時修改我的代碼。謝謝！

Answer 1

試試這個：

var total = $("li").length; 

$("li").each(function(i,v) { 
    var inc = i + ''; 

    if (i < 10) { 
     inc = 1; 
    } else { 
     inc = parseInt(inc[0]) + 1; 
    } 

    $(this).addClass('row' + inc); 

    if (i > 9) { 
     $(this).addClass('hide'); 
    } 

    if (i % 10 === 0) { 
     var count = (i/10) + 1; 
     $('.filter').append('<li><a class="paginate ' + count + '" href="#">' + count + '</a></li>'); 
    } 
}) 

http://jsfiddle.net/vU9Hv/4/

Answer 2

這是不是你在找什麼呢？

http://jsfiddle.net/vU9Hv/9/

這通常與slice(min, max) function工作。 你可以設置你要多少項目每 頁itemsNumber = 6 //you can change this as your requirement

這裏顯示的是工作的代碼

var item = $("li"); 
var itemsNumber = 6; 
var min = 0; 
var max = itemsNumber; 

function pagination(action) { 

    var totalItems = item.length; 

    if (max < totalItems) {//Stop action if max reaches more than total items 
     if (action == "next") { 

      min = min + itemsNumber; 
      max = max + itemsNumber; 

     } 
    } 

    if (min > 0) {//Stop action if min reaches less than 0 
     if (action == "prev") { 

      min = min - itemsNumber; 
      max = max - itemsNumber; 

     } 
    } 

    item.hide(); 
    item.slice(min, max).show(); 

} 

pagination(); 


//Next 
$("#next").click(function() { 

    action = "next"; 
    pagination(action); 

}) 

//Previous 
$("#prev").click(function() { 
    action = "prev"; 
    pagination(action); 

})?