jQuery Plugin For On Screen Table Filter - Filter On The Table

Filter On The Table is a jQuery table filter plugin that adds a <input type="text"> element to <th> selected. It searches for inner html of a element with .sort-value and compare with inputed value. It was tested with 3000 rows, but it is safer to use below than 1000, depending on the number of columns.

Basic Usage:

1. Include the jQuery FOTT plugin's stylesheet in the head section of your page.

<link rel="stylesheet" href="css/fott.css">

2. Include the jQuery javascript library together with JQuery FOTT plugin's javascript at the bottom of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="js/jquery.fott.js"></script> 

3. Create a normal Html data table.

<table>
<thead>
<tr>
<th class="filterid">ID</th>
<th class="filtername">Value</th>
</tr>
</thead>
<tbody>

<tr style="display: table-row;">
<td class="account-id"> ID 1 </td>
<td class="account-name sort-value"> Value 1 </td>
</tr>

<tr style="display: table-row;">
<td class="account-id"> ID 2 </td>
<td class="account-name sort-value"> Value 2 </td>
</tr>

<tr style="display: table-row;">
<td class="account-id"> ID 3 </td>
<td class="account-name sort-value"> Value 3 </td>
</tr>

...

</tbody>
</table>

5. Call the plugin and set the fieldFilter option for sortable elements.

<script>
$('.filterid').fott({fieldFilter: 'account-id'});
$('.filtername').fott({fieldFilter: 'account-name'});
</script>

---

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