Search results

HTML Table Filter Generator

HTML Table Filter Generator is no longer maintained, it is now replaced
by the TableFilter
project. Don't hesitate to check the
demos
out in their new
location
along with exhaustive documentation in the project's
WIKI.

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: <,
<=, >, >=.

What's new?

TableFilter is finally available!

This script is now being replaced by
TableFilter. There
will be no longer
updates to this library. If you haven't used this script before,
you can safely switch to
TableFilter. If you
already used this library in the past, check the
demos out and read
the documentation in the
WIKI
to understand the changes occurred to the configuration options and public
API.
In addition, you can now consult the ES6 source code documentation in the
docs section.

Enjoy the next generation of the HTML Table Filter Generator!

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

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:

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.