By adding a js-filterable-table class to the table, the script will automatically add filter boxes above the table. The type of filter will be:

• text search - filter the table based on a text input. Add data-case-sensitive="true" to witch on case-sensitivity.
• range - filter the table based on a range of values. It ignores preceding and following text (e.g pound signs or p.a.).
• option - filter the table based on a selected option. Options are gathered from the content in the column.
• false - don't add a filter for this column (default)

You can define which columns are to be filtered using a colgroup, with each col given a data- attribute relevant to the filter option. Further options can be assigned to the filter using these data- attributes. You can add span attributes to the col elements to save space.

As with searchable tables, you can choose to ignore the first row of the tbody by adding data-header="true" to the table element.

Use

var m = new FILTERABLE({
  $table: $('#some-table')
});

Example

Example using accommodation tables

College	Bathroom	Catering	Let length	Price per week	Price per year	Dummy
James	Ensuite	Catered	40 weeks	£196	£7,840	xyz
Alcuin	Ensuite	Self-catered	50 weeks	£155	£7,750	xyz
Constantine	Ensuite	Self-catered (weekly college meal)	44 weeks	£174	£7,656	xyz
Langwith	Ensuite	Self-catered (weekly college meal)	44 weeks	£174	£7,656	xyz
Halifax	Ensuite	Self-catered	44 weeks	£169	£7,436	xyz
James	Shared	Catered	40 weeks	£181	£7,240	xyz
Goodricke	Ensuite	Self-catered (weekly college meal)	44 weeks	£160	£7,040	xyz
Constantine	Shared	Self-catered (weekly college meal)	44 weeks	£157	£6,908	xyz
Langwith	Shared	Self-catered (weekly college meal)	44 weeks	£157	£6,908	xyz
Alcuin	Ensuite	Self-catered	44 weeks	£155	£6,820	xyz
Halifax	Ensuite	Self-catered	44 weeks	£155	£6,820	xyz
Derwent	Ensuite	Catered	40 weeks	£168	£6,720	xyz
Langwith	Shared	Self-catered (weekly college meal)	40 weeks	£157	£6,280	xyz
Alcuin	Ensuite	Self-catered	40 weeks	£155	£6,200	xyz
Vanbrugh	Ensuite	Self-catered	40 weeks	£155	£6,200	xyz
Derwent	Shared	Catered	40 weeks	£153	£6,120	xyz
James	Shared	Catered	40 weeks	£153	£6,120	xyz
Vanbrugh	Shared	Catered	40 weeks	£153	£6,120	xyz
Vanbrugh	Ensuite	Self-catered	38 weeks	£155	£5,890	xyz
Goodricke	Shared	Self-catered (weekly college meal)	40 weeks	£145	£5,800	xyz
Derwent	Shared	Self-catered	40 weeks	£140	£5,600	xyz
Halifax	Shared	Self-catered	40 weeks	£140	£5,600	xyz
Vanbrugh	Shared	Catered	40 weeks	£136	£5,440	xyz
Halifax	Shared	Self-catered	40 weeks	£99	£3,960	xyz

Example - list

• Some text goes here (Option 1 / checkbox is false)
• Here is some different text (Option 1 + option 2 / checkbox is true)

Options

• table - a jQuery object, which should be a table element. The script automatically parses for tables with the class .js-filterable-table.
• header - Boolean, whether the first row of the tbody should be included.
• exclude-cols - Array, Array of column numbers (not zero-based) to skip in the search.

Each column can have the options:

• filter-text - Filter the column based on a text search

  • caseSensitive - Boolean, whether the search is case-sensitive.

• filter-text - Filter the column based on a text search