Question

我已阅读有关过滤表插件的信息。我正在搜索的是这个弹出窗口。

popup

当用户开始在搜索框中输入内容时，相应的频道/类别（在上一个下拉框中选择）应该过滤掉。还有一些动画加载动作应该在过滤进程进行时发生。

我正在寻找jQuery插件，这将使我的过滤器工作更容易实现。

Answer 1

我认为拥有一个插件是不明智的。做这样的事情：

function filter($rows, category, search) {
     $rows.each(function() {
          if (category == ($("td:eq(2)", this).text() || category == "all") &&  (search. === "" || $("td:eq(1)", this).text().indexOf(search) !== -1) {
               $(":checkbox", this).removeAttr("disabled");
               $(this).show();
          }
          else
               $(this).hide(function(){
                   $(":checkbox", this).attr("disabled", "disabled");
               });
     });
}


$("select.category").change(function() {
     filter ($(this).closest("form").find("tr"), $(this).val(), $(this).closest("form").find("input.search").val());
});

$("input.search").keyUp(function() {
     filter ($(this).closest("form").find("tr"), $(this).closest("form").find("select.catagory").val(), $(this).val()); 
});

您可能需要进行一些调整才能使其与html的确切格式一起使用。

更新以使其成为 PLUGIN

$.fn.filter_table = function(options) {
    options = $.extend(options, {
         show: $.noop(), //Callback when a row get shown
         hide: $.noop(), // Callback when a row gets hidden
         entries: "table tr", // Selector of items to filter.
         map: {} //Required parameter
        //TODO Add default ajustment parameters here to remove ambiguity and assumptions.      
    });

    return this.each(function() {
        var form = this;

        function each(callback) {
            for (var selector in options.map) {
                 var check = options.map[selector];
                 $(selector, form).each(function(){
                     callback.call(this, check);
                 });  
            }
        }

        function show(row) {
            if (!$(row).is(":visible")) {
               options.show.apply(row);
               $(row).show();
            }
        }

        function hide(row) {
            if ($(row).is(":visible"))
               $(row).hide(options.hide);
        }

        function run_filter() {
            $(options.entries, form).each(function() {
               var row = this, matched = true;

               each(function(check) {
                   matched &= check.call(this, row);
               });

               matched ? show(this) : hide(this);
            })
        }

        //Bind event handlers:

        each(function() {
           $(this).bind($(this).is(":text") ? "keyup" : "change", run_filter);
        });

    });
};

您可以按如下方式使用此插件：

$("form").filter_table({
    map: {
       //These callback define if a row was matched:
       "select.category": function(row) {
            //this refers to the field, row refers to the row being checked.
            return $(this).val() == "all" || $(this).val() == $("td:eq(2)", row).text();
        },
        "input.search": function(row) {
            return $(this).val() == "" || $(this).val() == $("td:eq(1)", row).text();
        }
    },

    entries: "tr:has(:checkbox)", //Filter all rows that contain a checkbox.

    show: function() {
        $(":checkbox", this).removeAttr("disabled");
    },

    hide: function() {
        $(":checkbox", this).attr("disabled", "disabled");
    }
});

一旦调试它就可以工作了。我没有测试过。我认为那部分取决于你。

Answer 2

如果你的HTML看起来像这样：

<form id="filterForm">
    <input type="text" id="filterBox">
    <input type="submit" value="Filter">
</form>

<div id="checkboxContainer">
    <label><input type="checkbox" id="checkbox123"> Checkbox 123</label>
</div>

你可以做点像......

//Set variables so we only have to find each element once
var filterForm = $('#filterForm');
var filterBox = $('#filterBox');
var checkboxContainer = $('#checkboxContainer');

//Override the form submission
filterForm.submit(function() {

    //Filter by what the label contains
    checkboxContainer.find('label').each(function() {

        //If the value of filterBox is NOT in the label
        if ($(this).indexOf(filterBox.val()) == -1) {

            //Hide the label (and the checkbox since it's inside the label)
            $(this).hide();

        } else {

            //Show it in case it was hidden before
            $(this).show();

        }
    });

    //Prevent the form from submitting
    return false;
});

Answer 3

您可以使用此tablesorterfilter插件来实现您的需求

Working Fiddle

另请查看http://datatables.net/

Answer 4

那里有很多选择。这是一个很好的起点：http://www.wokay.com/technology/32-useful-jquery-filter-and-sort-data-plugins-62033.html

这样的过滤并不是非常复杂。可能值得查看几个插件的来源，这些插件接近您想要的，然后尝试编写自己的插件。如果你自己做的话，你会学到很多东西！

使用jQuery过滤html字段

4 个答案:

更新以使其成为 PLUGIN