Question

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 🙂

Answer 1

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

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;

and end with:

$("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();
});