jQuery Filter on the Table - jquery-fott.js v0.1.0

Let fott handle on screen value filter, handling each field with each column

Contents

  1. Introduction
  2. Gettings started
  3. Examples
  4. Download
  5. Documentation

Introduction

Fott (Filter on the table), is a jQuery plugin that adds a <input type="text"> element to <th> selected.

It searches for inner html of an element with .filter-value and compare with inputted value.

It was tested with 3000 rows, but it is safer to use below than 1000, depending on the number of columns.

Getting started

As a jQuery plugin, you must include jQuery 1.7.0+ to your project then include fott.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/fott.min.js"></script>

To active input fields, you should select a <th> and set fieldFilter value to cell class that has the expected value:

...
<body>
...
<table>
<thead>

<th class="filterid">ID</th>
<th class="filtername">Name</th>

</thead>
</table>
...
$('.filterid').fott({fieldFilter: 'account-id'});

Fott will then search for a <td> with class="account-id"

Finding the cell, Fott will then search for a element with class="filter-value". The inner value of this element will be used for filtering. You can also set the <td> itself with class="filter-value", such as:

<td class="account-name filter-value">Some value</td>

NOTE: Fott wraps the new <input> with a <div class="filter">. I suggest you to include the css file as well, although it is not essential for fott.

Examples

Example 1 - Default settings (No strict, placeholder as <th> inner value):

ID Name

Example 2 - Strict and placeholder:

strict propriety will force to match only exact content.

placeholder propriety will overwrite default placeholder.

ID Name

Example 3 - Big table, custom input class:

inputClasses can contains any classes you want to add. In this case, form-control and input-md

ID Name

Download

You can download compressed or uncompressed versions of fott:

You can also download, clone and contribute with fott at GitHub

Documentation

strict: false or true.
Default: false

Sets if content must be exactly as typed or if must only contains the value

wrapperClasses: String
Default: 'filter'

One or more classes of input's wrapper.

Example: 
wrapperClasses: 'beautiful-wrapper wrapper wrapping'

Avoid to set any value containing filter. Eg: filter-field, filter-wrap.

inputClasses: String
Default: 'input-fott'

One or more classes of input field. This classes will be applied to all inputs.

Example: 
inputClasses: 'form-control input-medium no-shadow'

Avoid to set any value containing input-fott. Eg: input-fott-md, big-input-fott.

fieldFilter: String
Default: Selected element inner content.

Sets which class identify <td> that has an element with filter-value as class, or <td> itself for future searching and comparison of value.

Example: 
fieldFilter: 'account-name'

Would match:

<td class="account-name filter-value">Obi-wan</td>
<td class="account-name"><a href="#" class="filter-value">Obi-wan</a></td>
placeholder: String
Default: 'Filter for: ' + inner value of selected <td>

Sets input's placeholder.

Example: 
placeholder: 'Looking for a jedi?'

Would produce:

<input type="text" class="input-fott" data-fieldfilter="account-name" placeholder="Looking for a jedi?">
table: Element table
Default: <table> element of selected element

Sets a <table> element to provide navigation through rows and cells. By default, fott considers you are using a structure like:

<table>
<thead>
<th>Header 1</th>
<th>Header 2</th>
</thead>
...
</table>

If you use a different heading structure, you should manually set the <table> element here. Even so, table must have <tbody> or fott won't be able to navigate between rows and cells

Example: 
table: $('.table-striped')

Contact

You can tweet me @latoquita