如何对这个 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);

})?