Skip to content

erikrichert/jquery-tableFilter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 

Repository files navigation

#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

About

simple jQuery plugin for text input table filtering

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published