🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

multifilter is a lightweight (~2kb) and user-friendly jQuery plugin that enables you to filter table data using jQuery and multiple input fields.

Filter input filtering

Documentation

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 May Also Like