Question

I have read about filtering table plugins. What I’m searching for is like this popup window.

_{(source: staticflickr.com)}

When the user starts typing in the search-box, the relevant channel/category (as selected on previous dropdown box) should filter up. Also some animated loading action should happen while the filter process is going on.

I am looking for jQuery plugins which will make my filter-job easier to implement.

Answer 1

I think it is to ambigous to have a plugin for it. Just do something like this:

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

You may need to make a few adjustments in order to make it work with the exact format of html.

Update to make it into a 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);
        });

    });
};

You can use this plugin as follows:

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

Okay it should work once it was debugged. I haven’t tested it. I think that part is up to you.