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 titleQualification earnedStudy modeUK/EUInternational
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 with data-header="true"

Example with data-exclude-cols and data-include-cols

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