0

このコードで私を助けてくれることを願っています。コンテンツをフィルタリングするかどうかに関係なく機能する必要があるレコードのリストをページ分割しようとしています。

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 つの li が表示されます)。

  2. カテゴリをクリックすると、レコードのフィルタリングに使用しているクラスでページネーションが機能するはずなので、「次へ」または「前へ」を押すと、選択したカテゴリが表示されます。

私のコードを自由に変更してください。ありがとう！

4

2 に答える 2

0

これはあなたが探しているものですか？

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

これは通常、 で動作しslice(min, max) functionます。1ページに表示する項目数を設定できます 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);

})?
于 2012-06-13T06:11:51.457 に答える
0

これを試して：

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/

于 2012-06-13T02:20:54.070 に答える