#jQuery Table Filtering Plugin
This is a simple jQuery plugin for realtime filtering of tabular data based on text entered into a text input field. It will filter the table rows based on matching input to a single column. Requires a specific configuration (see usage below) and can be customised for unique html Id's and classes (see API below).
##Requirements
jQuery 1.11 or higher
##Installation
The plugin should be called after the main jQuery library.
ex.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/jquery.tableFilter.min.js"></script>
##Usage
minimal HTML configuration:
<div id="myContainer">
<input id="filter" type="text">
<table id="filter-table">
<thead>
...
</thead>
<tbody>
<tr>
<td class="filter-cell">This is the column that will be ssearched</td>
<td></td>
<td></td>
...
</tr>
</tbody>
</table>
</div>
basic usage:
$('#myContainer').tableFilter();
Options can also be passed as an object (see API):
$('#myContainer').tableFilter({
tableID: '#myTable',
filterID: 'myFilter',
caseSensitive: true
});
##API
Option | Default Value | Description | |
---|---|---|---|
tableID | '#filter-table' | This is the ID of the table to be filtered. Can be customized if you have a different ID. | |
filterID | '#filter' | This is the ID of the input that will accept the filter text. Can be customized if you have a different ID. | |
filterCell | '.filter-cell' | This is the | (column) that will contain the text to be filtered. Can be customized if you have a different ID. |
autoFocus | false | if set to true the page will autofocus on the filterID on load | |
caseSensitive | false | if set to true the filtering will be case sensitive | |
noResults | 'no results found' | This is the message displayed when filtering returns no results (string) | |
columns | null | The plugin will determine the # of columns based on first row, If your first row has less columns than rest of table you can set column count here |