jQuery table filter with multiple criteria – multifilter

Multifilter is a jQuery table filter, allowing us to apply multiple criteria to the HTML tables.

jQuery table filter for HTML tables

A jQuery plugin to filter HTML5 tables, based on multiple inputs. Dead easy to use.

multifilter - easy jQuery table filtering
multifilter – easy jQuery table filtering

Basic usage

Include and jQuery framework and the plugin to the HTML page, and call the plugin for the table:

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

If we have multiple tables on the same page, and we want different sets of inputs for the different tables, we can pass an 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="" data-col="email">

This small plugin helps to solve filtering tables problem really easy.

License: The MIT License

Demo:

http://tommyp.github.io/multifilter

Get the jQuery table filter plugin from GitHub:

https://github.com/tommyp/multifilter

You may also like:

JavaScript Excel tables library

A nice, editable jQuery table plugin with Bootstrap

jQuery, expressJS and mustacheJS tutorial

Enjoy!

Share:Share on Facebook3Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest2