Javascript 分页和字母过滤器问题

我在jQuery中使用分页和字母过滤器。它工作正常，但我想再添加一个链接（全部），当用户单击该链接时，它将显示所有数据

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

$（窗口）。加载（函数（）{
$（'div.filter'）。委托（'a'，'click'，函数（事件）{
$（'ul.items li'）.hide（）；
event.preventDefault（）；
});
var itemsNumber=10；
var min=0；
var max=项目数量；
函数分页（操作）{
var totalItems=$（“#项目包装”）.find（“li”）.length；
if（max0）{//如果最小值小于0，则停止操作
如果（动作==“上一步”）{
最小=最小-项目数目；
max=max-itemsNumber；
}
}
否则{
}
$（“#项目包装器”）.find（“li”）.hide（）；
$（“#项目包装器”）.find（“li”）.slice（min，max.show（）；
如果（操作==“下一步”）{
如果（最大值<总项目数）
{
$（“#prev”）.removeClass（“上一个链接灰”）；
$（“#prev”）.addClass（“上一个链接”）；
}
其他的
{
$（“下一个”）.removeClass（“下一个链接”）；
$（“#next”）.addClass（“next#link_gray”）；
}
}
如果（动作==“上一步”）{
如果（最小值>0）
{
$（“#next”）.removeClass（“next#link_gray”）；
$（“下一个”）.addClass（“下一个链接”）；
}
其他的
{
$（“#prev”）.removeClass（“上一个链接”）；
$（“#prev”）.addClass（“上一个链接灰”）；
}
}
var mymax=max；
if（parseInt（max）>parseInt（totalItems））{
mymax=项目总数；
}
var pagelbl=（parseInt（min）+1）+到“+mymax+”的“+totalItems”；
$（#spnpage”）.html（pagelbl）；
}
分页（）；
//下一个
$（“#下一步”）。单击（函数（）{
action=“next”；
分页（动作）；
})
//先前的
$（“#prev”）。单击（函数（）{
action=“prev”；
分页（动作）；
})
});   //]]>  
功能getSelected（字母表）{
$（“.filter”）.find（'a'）.removeClass（'Selected'）；
$（“#”+字母表）.addClass（'Selected'）；
$（“#prev”）.removeClass（“上一个链接灰”）；
$（“#next”）.removeClass（“next#link_gray”）；
$（“#prev”）.addClass（“上一个链接”）；
$（“下一个”）.addClass（“下一个链接”）；
}

HTML:

您可能需要提供更多的html，但似乎您所需要做的只是

show（）

您的

#项目包装中的每个列表项

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

这对您当前的标记有意义吗？
您应该创建JSFIDLE，因为在您的代码中，您将完成许多交互，并且您的HTML只包含用于执行该交互的链接，而不包含确切的结构。此外，您的代码中没有按字母顺序过滤数据的行。但是如果你只过滤一个字母，那么你只需要选择列表中的所有数据，而不是第一个字母过滤的数据，代码就可以运行了，不是吗？
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");
    }
}