Description: This awesome 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. Very nice!

How does it work?

You just need to define the id attribute of a table and insert a piece of javascript code in the head of the html document or in an external ".js" file.

Here you have an example of a regular html table:

From

Destination

Road Distance (km)

By Air (hrs)

By Car/Coach (hrs)

By Rail (hrs)

Sydney

Adelaide

1412

1.4

24

25.3

Sydney

Brisbane

982

1.5

17

16

Sydney

Canberra

286

.6

4.2

4.3

Sydney

Melbourne

872

1.1

14.3

10.5

Adelaide

Perth

2781

3.1

35

38

Adelaide

Alice Springs

1533

2

20

20.25

Adelaide

Brisbane

2045

2.15

33.3

40

Below the same table with a filtering grid generated automatically (press
enter after entering in some filter text):

From

Destination

Road Distance (km)

By Air (hrs)

By Car/Coach (hrs)

By Rail (hrs)

Sydney

Adelaide

1412

1.4

24

25.3

Sydney

Brisbane

982

1.5

17

16

Sydney

Canberra

286

.6

4.2

4.3

Sydney

Melbourne

872

1.1

14.3

10.5

Adelaide

Perth

2781

3.1

35

38

Adelaide

Alice Springs

1533

2

20

20.25

Adelaide

Brisbane

2045

2.15

33.3

40

By adding an id (id="table1") to the table and inserting the script below in the <body> section:

the grid will be generated automatically. The number of filters (<input>)
is equal to the number of columns (<td>). 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 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 Car/Coach (hrs)

By Rail (hrs)

Sydney

Adelaide (AUS)

1412

1.4

24

25.3

Sydney

Brisbane

982

1.5

17

16

Sydney

Canberra

286

.6

4.2

4.3

Sydney

Melbourne

872

1.1

14.3

10.5

Adelaide

Perth

2781

3.1

35

38

Adelaide

Alice Springs

1533

2

20

20.25

Adelaide

Brisbane2045

2.15

33.3

40ttt

setFilterGrid("table2",1);

Here we have specified row number 1, that is the second 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 pass the mentioned parameter
in order to calculate the right number of columns and also 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 may also decide to use a drop-down
lists (<select>) instead of text boxes:

This is the table caption

From

Destination

Road Distance (km)

By Air (hrs)

By Car/Coach (hrs)

By Rail (hrs)

1.

Sydney

Adelaide

1412

1.4

24

25.3

2.

Sydney

Brisbane

982

1.5

17

16

3.

Sydney

Canberra

286

.6

4.2

4.3

4.

Sydney

Melbourne

872

1.1

14.3

10.5

5.

Adelaide (AUS)

Perth

2781

3.1

35

38

6.

DeAdelaide

Alice Springs

1533

2

20

20.25

7.

Adelaide

Brisbane

2045

2.15

33.3

40

To do that you just need to declare an Array in which you specify which filters should not be displayed or displayed as drop-down lists:

You can name the Array as you want, but don't forget to add it
to the parameters of the setFilterGrid() function. It is important
to respect the syntax and naming convention as shown above. There are only 2
values for col_n: "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. Below you will find an exhaustive list of properties you can define.

Properties table

In the following table you will find all the elements you can define in the grid:

Property Name

Type

Description

Example

col_0

string

hides text box (input) for a desired column

var MyTableFilter = { col_0: "none"
}

col_3

string

generates a drop-down list for a desired column

var MyTableFilter = { col_3: "select"
}

btn

boolean

if set true shows "Go" button in the grid (default - false)

var MyTableFilter = { btn: true }

btn_text

string

changes the text of the button

var MyTableFilter = { btn_text: "Filter"
}

enter_key

boolean

disables "enter" key (default - true)

var MyTableFilter = { enter_key: false }

mod_filter_fn

function

calls another function instead of the default function ( Filter('mytable')
) at submission

this property designs a function that will be called after grid generation.
This function will interact with another script in order to merge the filter
generator with other script(s). Note that the invoked function needs to
developed. It accepts an object with the following properties:

Public functions

These are the functions developers should use in order to interact with the filter grid:

Fn name

Description

Example

TF_GetFilterIds()

Returns an array containing filter grid ids of the page

var gridIds = TF_GetFilterIds();

TF_HasGrid(id)

Checks if the table designated by the argument has a filter grid. It returns
a boolean

var hasTFGrid = TF_HasGrid("myTableId");

TF_GetFilters(id)

Returns an array containing filter ids of a specified grid

var filterIds = TF_GetFilters("myTableId");

TF_GetStartRow(id)

Returns the index of the row from which will start the filtering process

var startRow = TF_GetStartRow("myTableId");

TF_GetColValues(id,colindex,num)

Returns an array containing cell values of a column. It needs following
args:

a table id (string)

a column index (number)

a boolean set to true if we want only numbers to be returned (optional)

var myColValues = TF_GetColValues("myTableId",0);

TF_Filter(id)

Filters a table

TF_Filter("myTableId");

TF_RemoveFilterGrid(id)

Removes a filter grid. Note that all the properties attached to the filter
table will not be removed. This will make it easier to reset the filter
(if needed) since all the properties are still available

TF_RemoveFilterGrid("myTableId");

TF_ClearFilters(id)

Clears the grid filters only. Note that the table will not be filtered

TF_ClearFilters(id);

TF_SetFilterValue(id,index,searcharg)

Inserts a value in a specified filter. It accepts the following arguments: