Jquery无法对冲突进行分页

时间:2015-11-13 16:17:22

标签: jquery

我有7个结果用jquery分页。

我也有复选框表格,可以正常过滤结果。

问题在于,当我过滤结果时,分页在此之后无法正常工作。

可能冲突是因为过滤器和分页代码都使用show()hide()方法。

请你帮我解决问题。

http://jsfiddle.net/EducateYourself/ev9eze33/5/

function update() {
    $('.resultblock').hide();
    if (categories.length > 0) {
        $('.resultblock').hide();
        for (i = 0; i < categories.length; i++) {
            $('.resultblock[data-tag*="'+categories[i]+'"]').show();
        } 
    }
    $('.resultblock:lt('+currentFirstElement+')').hide();
    $('.resultblock:gt('+(currentFirstElement+numberPerPage-1)+')').hide();
    $('#count').html('Count: '+$(".resultblock:visible").length);
    $('#totalcount').html('Total Count: '+$(".resultblock").length);
};

1 个答案:

答案 0 :(得分:0)

您的代码非常复杂,通过这样做可以让您的生活更轻松:

$(document).ready(function() {
    var categories = [];
    var currentFirstElement = 0;
    var numberPerPage = 3;
    update();

    $(".category").click(function(e) {
        if (this.checked)
            categories.push(this.value);
        else
            categories.splice(categories.indexOf(this.value), 1);
        update();
    });

    $(".pageButton").click(function() {
        currentFirstElement = Number(this.text)*numberPerPage-numberPerPage;
        $('#page').html('Page #'+this.text);
        update();
    });

    function update() {
        $('.resultblock').hide();
        if (categories.length > 0) {
            $('.resultblock').hide();
            for (i = 0; i < categories.length; i++) {
                $('.resultblock[data-tag*="'+categories[i]+'"]').show();
            } 
        }
        $('.resultblock:lt('+currentFirstElement+')').hide();
        $('.resultblock:gt('+(currentFirstElement+numberPerPage-1)+')').hide();
        $('#count').html('Count: '+$(".resultblock:visible").length);
        $('#totalcount').html('Total Count: '+$(".resultblock").length);
    };
});

这可以按预期工作。

> DEMO