Tiny jQuery Plugin For Clint-side Table Filtering - filterForTable

File Size: 14.7 KB
Views Total: 5196
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Tiny jQuery Plugin For Clint-side Table Filtering - filterForTable

filterForTable is a lightweight jQuery plugin to provide basic filtering & live searching functionality for html table that works with formatted numbers, data-filter attribute, and excepted rows.

More examples:

Basic usage:

1. First you need to include the filterForTable plugin's script after jQuery JavaScript library like this:

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="filterForTable.js"></script>

2. Create a normal search field to filter your html table.

<input id="searchInput" name="search" placeholder="Searching..."/>

3. Active the filtering functionality on your html table.

$('table').filterForTable();

4. By default, the plugin allows you to filter table rows by cell values. You can also use data-filter attribute instead.

// added data-filter for these tds 
<td data-filter="Carlitos Bacca">Carlos Bacca</td>
<td data-filter="Alex Rodrigo Dias da Costa">Alex</td>
<td data-filter="Super Mario">Mario Balotelli</td>
<td data-filter="Jack Giacomo Bonaventura">Giacomo Bonaventura</td>

5. All plugin options.

// JS Selector for search field
searchSelector: '#searchInput',

// minimaum characters
minChars: 1,

// maximum characters
minRows: 1,

// message to display when there'os no data found
emptyMsg: 'No data found',

// CSS ID for no empty message <tr> tag
emptyTrId: 'filterForTableEmptyRow',

// <tr> with choosen class will be excepted from filtering
exceptClass: ''

This awesome jQuery plugin is developed by AlexYaroma. For more Advanced Usages, please check the demo page or visit the official website.