A repository of over 1000 quality jQuery plugins

jQuery Multifilter

Multifilter is a jQuery Filter & Sort plugin.

Created by Tommyp

A jQuery plugin to filter a table based on multiple inputs

Not what you're looking for? Click here to view more Filter & Sort jQuery plugins

multifilter

A jQuery plugin to filter a table based on multiple inputs. Check out the demo.

Usage

Call the plugin on any input you want to track and tell it what to look for with a data-col attribute:

$(document).ready(function() {
  $('.filter').multifilter();
});

If you have multiple tables on the same page and you want different sets of inputs for the different tables, you can pass a jQuery object for each instance for each table element.

$(document).ready(function() {
  $('.main-filter').multifilter({
    'target': $('#main-table')
  });

  $('.alt-filter').multifilter({
    'target': $('#alt-table')
  });
});

As long as the data-col attribute matches up with something in the <thead>, it will filter the content in those columns in the table:

<input class="filter" name="email" placeholder="email" data-col="email">

That's it!

Alternatively, if you prefer your tables without a <thead> you match up the column with a class on your <td> tags by doing:

$(document).ready(function() {
  $('.main-filter').multifilter({
    'method': 'class'
  });
});


You might also like these other Filter & Sort jQuery Plugins

  • jquery-sdfilterme

    Another simple light-weight jQuery plugin to easily filter and order portfolio, articles, gallery, etc.

  • Tabulous JS

    A jQuery tabs module for todays web!

  • jQuery Autotab

    A jQuery plugin that provides auto tabbing and filtering on text fields in a form

License:

The MIT License (MIT)