3

jQuery でページネーションとアルファベット フィルターを使用します。正常に動作していますが、もう 1 つリンク (すべて) を追加したいと思います。ユーザーがそのリンクをクリックすると、すべてのデータが表示されます。

ここに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();
    });

    var itemsNumber = 10;
    var min = 0;
    var max = itemsNumber;

    function pagination(action) {
        var totalItems = $("#item-wrapper").find("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;
            }
        }
        else {
        }
        $("#item-wrapper").find("li").hide();
        $("#item-wrapper").find("li").slice(min, max).show();

        if (action == "next"){
         if (max < totalItems)
             {
               $("#prev").removeClass("previous_link_gray");
               $("#prev").addClass("previous_link");
             }
             else
             {
                $("#next").removeClass("next_link");
                $("#next").addClass("next_link_gray");
             }
        }

        if (action == "prev"){
                 if (min>0)
                     {
                       $("#next").removeClass("next_link_gray");
                       $("#next").addClass("next_link");
                     }
                     else
                     {
                       $("#prev").removeClass("previous_link");
                       $("#prev").addClass("previous_link_gray");
                     }
                }
                var mymax = max;
                if(parseInt(max) > parseInt(totalItems)) {
                    mymax = totalItems;
                }

                var pagelbl = (parseInt(min) + 1) + ' to ' + mymax + ' of ' + totalItems;
                $("#spnpage").html(pagelbl);
            }

    pagination();

    //Next
    $("#next").click(function () {
        action = "next";
        pagination(action);

    })

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

function getSelected(Alphabet)  {
    $(".filter").find('a').removeClass('Selected');
    $("#" + Alphabet).addClass('Selected');
    $("#prev").removeClass("previous_link_gray");
    $("#next").removeClass("next_link_gray");
    $("#prev").addClass("previous_link");
    $("#next").addClass("next_link");
}

HTML:

<li><a href="#category-a11" id="all" onclick="getSelected('All')" class="Selected">All</a></li>
<li><a href="#category-A" id="A" onclick="getSelected('A')">A</a></li>
<li><a href="#category-B" id="B" onclick="getSelected('B')">B</a></li>
4

1 に答える 1

0

もっと多くの html を提供する必要があるかもしれませんが、あなたがする必要があるのは、例show()のすべてのリスト項目だけのようです#item-wrapper。

$("#item-wrapper").find("li").show();

// A slightly more process efficient way of selecting would be
$("#item-wrapper li").show();

したがって、getSelected関数は次のようになります。

function getSelected(Alphabet){
    if(Alphabet == "all"){
        // Hide prev/next btns as they wont make sense to user
        $("#prev, #next").hide();
        // Show the items
        $("#item-wrapper li").show();
    }else{
        $(".filter").find('a').removeClass('Selected');
        $("#" + Alphabet).addClass('Selected');
        $("#prev").show().removeClass("previous_link_gray");
        $("#next").show().removeClass("next_link_gray");
        $("#prev").addClass("previous_link");
        $("#next").addClass("next_link");
    }
}

現在のマークアップでそれは理にかなっていますか?

于 2012-12-07T22:17:47.330 に答える