HTML Table Filter Generator

Description

This script adds to any html table a "filter by column" feature that enables users to filter and limit the data displayed within a long table. It even works on tables with uneven rows. The script automatically adds a filter grid bar at the top of the desired table. Users can use the following operators to filter columns containing numeric data: <, <=, >, >=.

Support this project:

Main features

Open source and completely free HTML table enhancer:

What's new?

Version 2.5

In this version a license change affects the ezEditTable module (inline editing, navigation and selection components): it is now available under a commercial license:

Sortable Table extension v2.1

Columns Visibility Manager extension v1.4

Filter operators

In order to perform advanced searches, you can use the following filter operators in the text-box filters:

Operator Description Type Example
< Values lower than search term are matched number <1412
<= Values lower than or equal to search term are matched number <=1412
> Values greater than search term are matched number >1412
>= Values greater than or equal to search term are matched number >=1412
= Exact match search: only the whole search term(s) is matched string / number =Sydney
* Data containing search term(s) is matched (default operator) string / number *Syd
! Data that doesn't contain search term(s) is matched string / number !Sydney
{ Data starting with search term is matched string / number {S
} Data ending with search term is matched string / number }y
|| Data containing at least one of the search terms is matched string / number Sydney || Adelaide
&& Data containing search terms is matched string / number >4.3 && <25.3
[empty] Empty data is matched [empty]
[nonempty] Data which is not empty is matched [nonempty]
rgx: A regular expression is used to match data rgx:de$

How to implement the filter grid bar

First you need to include the script's javascript file (tablefilter.js) in the head section of your web page

	<script type="text/javascript" language="javascript" src="TableFilter/tablefilter.js"></script>
	

and make sure that the table you'd like to make filterable has a unique id.

Here you have an example of a regular html table:

From Destination Road Distance (km) By Air (hrs) By Rail (hrs)
Sydney Adelaide 1412 1.4 25.3
Sydney Brisbane 982 1.5 16
Sydney Canberra 286 .6 4.3
Sydney Melbourne 872 1.1 10.5
Adelaide Perth 2781 3.1 38
Adelaide Alice Springs 1533 2 20.25
Adelaide Brisbane 2045 2.15 40

Below the same table with a filtering grid generated automatically (id="table1"):

From Destination Road Distance (km) By Air (hrs) By Rail (hrs)
Sydney Adelaide 1412 1.4 25.3
Sydney Brisbane 982 1.5 16
Sydney Canberra 286 .6 4.3
Sydney Melbourne 872 1.1 10.5
Adelaide Perth 2781 3.1 38
Adelaide Alice Springs 1533 2 20.25
Adelaide Brisbane 2045 2.15 40

There 3 different ways to generate the filter grid bar:

<script language="javascript" type="text/javascript">
	var tf = setFilterGrid("table1");
</script> 
<table id="table1" cellspacing="0" class="mytable filterable" >
<script language="javascript" type="text/javascript">
	var tf01 = new TF('table1');
	tf01.AddGrid();
</script> 

If your document contains several tables (like this page), it is important to define unique ids, otherwise the script will not work properly.

The setFilterGrid() function or the TF class accepts 2 additional parameters that will be explained in the next tables. In the example below, by specifing a row number as a "reference" row, we tell the function which row to use in order to generate the right number of filters:

This is the table caption
From Destination Road Distance (km) By Air (hrs) By Rail (hrs)
Sydney Adelaide 1412 1.4 25.3
Sydney Brisbane 982 1.5 16
Sydney Canberra 286 .6 4.3
Sydney Melbourne 872 1.1 10.5
Adelaide Perth 2781 3.1 38
Adelaide Alice Springs 1533 2 20.25
Adelaide Brisbane2045 2.15 40
var tf02 = setFilterGrid("table2",2);

or

var tf02 = new TF("table2",2);
tf02.AddGrid();

Here we have specified row number 2, that is the third row from the top. The 1st row is number 0. Since the 1st row doesn't contain the right number of columns, we need to use the second parameter of the function in order to calculate the right number of columns and also to define from which row should start the filtering process. Note that merged cells (<td colspan="2">) are simply skipped.

By default, the script adds text boxes (<input>). As you will see in the next example, you can also decide to not display a filter or use drop-down lists (<select>) instead of text boxes:

This is the table caption
From Destination Road Distance (km) By Air (hrs) By Rail (hrs)
Sydney Adelaide 1412 1.4 25.3
Sydney Brisbane 982 1.5 16
Sydney Canberra 286 .6 4.3
Sydney Melbourne 872 1.1 10.5
Adelaide Perth 2781 3.1 38
Adelaide Alice Springs 1533 2 20.25
Adelaide Brisbane 2045 2.15 40

To do that you just need to declare a literal object (configuration object) in which you specify which filters should be displayed as drop-down lists or simply hidden:

<script language="javascript" type="text/javascript">
	var table3Filters = {
		col_0: "select",
		col_4: "none",
		btn: true
	}
 	var tf03 = setFilterGrid("table3",2,table3Filters);
</script>

or

<script language="javascript" type="text/javascript">
	var table3Filters = {
		col_0: "select",
		col_4: "none",
		btn: true
	}
	var tf03 = new TF("table3",2,table3Filters);
	tf03.AddGrid();
</script>

You can name the configuration object as you want, but don't forget to add it to the parameters of the setFilterGrid() function or TF class. It is important to respect the syntax and naming convention as shown above. There are only 2 values: "none" hides the text box for the designated column and "select" creates a drop-down list with only 1 occurrence of each cell data. Similarly to row designation, here the first column is column number 0: col_0.

The button "go" in the grid can also be changed. By adding the btn_text property with a desired value, you can modify the text of the button. You will find an exhaustive list of properties in the documentation page.

Documentation

For more information about the script configuration check the documentation page.

Last thing...

I hope you will find this script useful. Feel free to use and change this script, however I will be grateful if you could inform me about any usage or modification.

Enough words



E.n.j.o.y.  ads-free content!