Description

FilterTable.js is a jQuery plugin that make you filter a table by right-clicking in any column of the header of an HTML table and selecting one or more options.

Compatible with DataTables.js plugin, allowing multiple column filtering without affecting native searching functions.

Initalization



Options

FunctionOptionTypeDefaultDescription
Filter Table
legendString"All Items"Set the "Select All" text in the first option
iconString""Icon that is shown in the header when the column is being filtered with the filter_icon class.
The elements that can be used are: img, span, div and i
selectedBooleanfalseSet by default all options as selected, this doesn't hide any row of the table
caseSensitiveBooleanfalseThe filter list will display all values depending on whether it is case sensitive
dataTableBooleanfalseCreate the filter and run the dataTable() function
dtOptionsArray{}Set the options when having the option dataTable : true like this table.dataTable(dtOptions)
dtObjectObjectundefinedThe filter list will display all values depending on whether it is case sensitive
Set Filter
columnInteger1The column where the value is going to be searched starting with 1 to n, the value can be a string '1' or "1"
dataArray""An array with all data is going to be searched in the table
caseSensitiveBooleanfalseThis will filter all values depending on whether it is case sensitive
Do NOT use the DataTable option "searching" : false or the filter function will not be working


Filtered Table

NamePositionOfficeAgeStart dateSalary
Airi SatouAccountantTokyo332008/11/28$162,700
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Thor WaltonDeveloperNew York612013/08/11$98,540
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000


DataTable.js Filtered Table

NamePositionOfficeAgeStart dateSalary
Airi SatouAccountantTokyo332008/11/28$162,700
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Thor WaltonDeveloperNew York612013/08/11$98,540
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000




Set Filter Function

Text
Column
Case Sensitive
Find Value
NamePositionOfficeAgeStart dateSalary
Airi SatouAccountantTokyo332008/11/28$162,700
airi satouChief Executive Officer (CEO)London472009/10/09$1,200,000
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000