With big tables of data, it can be helpful to filter them based on their content.

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

Course title Qualification earned Study mode UK/EU International
Archaeological Information SystemsMScPart-time (36 months)£2,580£6,060
Archaeological Information SystemsPG DipFull-time£4,830£11,360
Archaeology of BuildingsMAPart-time (36 months)£2,580£6,060
Archaeology of BuildingsPG CertFull-time£3,220£7,570
Archaeology of BuildingsPG DipFull-time£4,830£11,360
BioarchaeologyMScPart-time (36 months)£2,580£6,060
Coastal and Marine ArchaeologyMScPart-time (36 months)£2,580£6,060
Conservation StudiesMAPart-time (36 months)£2,580£6,060
Cultural Heritage ManagementMAPart-time (36 months)£2,580£6,060
Digital HeritageMScPart-time (36 months)£2,580£6,060
Digital HeritagePG CertFull-time£3,220£7,570
Early PrehistoryMScPart-time (36 months)£2,580£6,060
Field ArchaeologyMAPart-time (36 months)£2,580£6,060
Historical ArchaeologyMAPart-time (36 months)£2,580£6,060
Landscape ArchaeologyMAPart-time (36 months)£2,580£6,060
Medieval ArchaeologyMAPart-time (36 months)£2,580£6,060
Mesolithic StudiesMAPart-time (36 months)£2,580£6,060
ZooarchaeologyMScFull-time£2,580£6,060
Archaeological Information SystemsMScFull-time£6,450£15,150
Archaeological Information SystemsMScPart-time£3,220£7,570
Archaeological ResearchPG DipFull-time£6,450£15,150
Archaeology of BuildingsMAFull-time£6,450£15,150
Archaeology of BuildingsMAPart-time£3,220£7,570
BioarchaeologyMScFull-time£6,450£15,150
BioarchaeologyMScPart-time£3,220£7,570
BioarchaeologyPG DipFull-time£6,450£15,150
Coastal and Marine ArchaeologyMScFull-time£6,450£15,150
Coastal and Marine ArchaeologyMScPart-time£3,220£7,570
Coastal and Marine ArchaeologyPG DipFull-time£6,450£15,150
Conservation StudiesMAFull-time£6,450£15,150
Conservation StudiesMAPart-time£3,220£7,570
Conservation Studies (Historic Buildings)MAFull-time£6,450£15,150
Conservation Studies (Historic Buildings)MAPart-time£3,220£7,570
Conservation Studies (Historic Buildings)PG DipFull-time£6,450£15,150
Cultural Heritage ManagementMAFull-time£6,450£15,150
Cultural Heritage ManagementMAPart-time£3,220£7,570
Cultural Heritage ManagementPG DipFull-time£6,450£15,150
Digital HeritageMScFull-time£6,450£15,150
Digital HeritageMScPart-time£3,220£7,570
Digital HeritagePG DipFull-time£6,450£15,150
Early PrehistoryMScFull-time£6,450£15,150
Early PrehistoryMScPart-time£3,220£7,570
Early PrehistoryPG DipFull-time£6,450£15,150
Field ArchaeologyMAFull-time£6,450£15,150
Field ArchaeologyMAPart-time£3,220£7,570
Field ArchaeologyPG DipFull-time£6,450£15,150
Historical ArchaeologyMAFull-time£6,450£15,150
Historical ArchaeologyMAPart-time£3,220£7,570
Historical ArchaeologyPG DipFull-time£6,450£15,150
Landscape ArchaeologyMAFull-time£6,450£15,150
Landscape ArchaeologyMAPart-time£3,220£7,570
Landscape ArchaeologyPG DipFull-time£6,450£15,150
Medieval ArchaeologyMAFull-time£6,450£15,150
Medieval ArchaeologyMAPart-time£3,220£7,570
Medieval ArchaeologyPG DipFull-time£6,450£15,150
Mesolithic StudiesMAFull-time£6,450£15,150
Mesolithic StudiesMAPart-time£3,220£7,570
Mesolithic StudiesPG DipFull-time£6,450£15,150
ZooarchaeologyMScFull-time£6,450£15,150
ZooarchaeologyMScPart-time£3,220£7,570
ZooarchaeologyPG DipFull-time£6,450£15,150

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