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