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