筛选和分页 [英] Filtering and paging

问题描述

大家好，感谢您的帮助.我试图实现一个简单的分页过滤器，按类别隐藏li的.该示例为此处.我是新手，但是在一些帮助下，主要想法正在起作用.唯一的问题是，当我单击过滤时，我只想对那个类别中的li进行分页.因此，如果我单击类别1"链接，则当我单击下一个"或上一个"时，类别为"category-2"的锂应该是隐藏的而不是不显示.

Hi people thanks for the help. Im trying to implement a simple pagination that filter, hiding li's by class. The example is here. I'm new in this but with some help the main idea is working. The only problem is that when i click to filter i wanna paginate just the li's in that category. So if i click in the "category 1" link, the li's with the class "category-2" should be hide and NOT APPEAR when i click next o prev.

HTML

<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 class="ctrl-nav">
<a href="#" id="prev">Previous</a><a href="#" id="next">Next</a>
</div>
</div>

JS

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

  event.preventDefault();
});


var itemsNumber = 6;
var min = 0;
var max = itemsNumber;

function pagination(action) {

    var totalItems = $("li").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;

        }
    }

    $("li").hide();
    $("li").slice(min, max).show();

}

pagination();


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

    action = "next";
    pagination(action);

})

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

})

任何帮助都将是一件好事:)

Any help would be nice :)

推荐答案

我已经更新了您的脚本: http://jsfiddle.net/vU9Hv/12/

I have updated your script: http://jsfiddle.net/vU9Hv/12/

基本上，我引入了一个新变量visible，其中包含要显示的所选li类.然后，pagination函数处理li的所有显示/隐藏.默认情况下，该变量设置为空白.因此，所有li都将最初显示. pagination函数将从以下位置开始:

Basically, I introduced a new variable visible which contained the selected li class to show. Then, the pagination function handles all the showing/hiding of lis. That variable is set to blank by default; thus, all lis will show initially. The pagination function will start with:

var totalItems = $("li" + visible).length;

结尾为:

$("li" + visible).slice(min, max).show();

将点击处理程序转换为:

While the click handler is converted to:

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

这篇关于筛选和分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！