Fagner Brack

I’ve created a system to filter the text of a TD within a table and, based in a specific algorythm, show only the desired TRs. It works with the following rules:

• Given a table with thead and tbody, jQuery Table Filter creates an input below all TDs of theads that automatically filters the content based on the innerHTML of each TD of the tbody
• The TRs that don’t match with desired filter are hidden and any input inside any TD is disabled (the input is enabled when the TR is visible again)
• The filter verifies the content splitting each word as it is a different search (“A test” matches with “A – test” and “test A”)
• The only requirement for the use of this plugin is that it is used ONLY in a table with at least a thead, th and tbody
• It is created a TR that informs the user when a filter did not return any result. It is positioned below the last TR of the tfoot. If there’s no tfoot, jQuery Table Filter creates it.

Let’s say you’ve got a table with thead and tbody:

<table id="my_table">
	<thead>
		<tr>
			<th>Nome</th>
			<th>Idade</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Steve Sunders</td>
			<td>27</td>
		</tr>
		<tr>
			<td>Clark Kent Sunders</td>
			<td>27</td>
		</tr>
		<tr>
			<td>Bruce Wayne</td>
			<td>35</td>
		</tr>
	</tbody>
</table>

It is possible to use the following parameters:

//===========================================================================================================
$("#my_table").tableFilter({ ignoreCase: true }); //Verifies if jQuery Table Filter should ignore the case
$("#my_table").tableFilter({ delay: 500 }); //delay to apply the filter after typing (if the table has a huge number of content)
$("#my_table").tableFilter({ trClasses: "tr-filter" }); //custom classes that will be set in the TR(s) that will be created to the filters
$("#my_table").tableFilter({ inputClasses: "input-filter" }); //custom classes that will be set in the filter inputs that will be created
$("#my_table").tableFilter({ emptyMessage: "No result" }); //Message when there's no result
$("#my_table").tableFilter({ columns: [0, 3, 4] }); //Index of the columns that will be filtered. If not especified consider all columns.
//===========================================================================================================

Below is a simple example of how you could use it:

<style type="text/css">
input.table-filter-class {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tableFilter.js"></script>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript">
$("#tableFilter_example").tableFilter({
    delay: 0,
    inputClasses: "table-filter-class"
});
</script>

And the result would be:

Name	City	Country	Age
Fagner Brack	Montenegro	Brazil	21
Steve P. Jobs	Los Altos	United States of America	56
Richard Markson Surname Brack	London	England	56

---

To download it click here