Click here to Skip to main content

Article

HTML Table Filter ala Excel

WoutL

Rate me:

4.75/5 (37 votes)

3 Aug 2005CPOL1 min read

225K

2.3K

56

71

A way to filter a large table in a simple manner.

Download source files - 1.6 KB

Demo

<script language="javascript"></script>

<input id="chk" önclick="enableFilter();" type="checkbox" name="chk" />Enable Filter

Col1	Col2
1	string
1	string2
2	String
2	STRING2
3
1	string
1	string2
2	String
2	STRING2
3

Introduction

When I was writing a web application, I needed a way to filter a large table in a simple manner. The users of the application are used to the auto filtering in MS Excel, so I wanted my filter to have the same look and feel.

Features

Once a column is filtered, the dropdown boxes for the rest of the columns are adapted to the changes. Just like the auto filter in Excel works!
If a row has the class noFilter, the row will not be touched by the filter.

Using the code

Using the code is very simple. Just include the script to the page:

HTML

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

And activate the filter in the OnLoad:

HTML

<body onload="attachFilter(document.getElementById('tbl'), 1)">

attachFilter expects two parameters:

The table object to attach the filter to.
The row number at which the filter row should be inserted.

Browser Compatibility

The script was initially written for IE. I did test it successfully on Firefox, but I do not know if the script works for Netscape browsers.

History

2005/07/27: First version.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

WoutL

Web Developer

Netherlands

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

Enable/Disable filter question

ahooja27-Jun-06 7:03

27-Jun-06 7:03

Hi WoutL,

I am using your script to filter my table. I am trying to use teh enable function you ahve on teh site but for some reason just cannot get it to work.

in .js
-------
function enableFilter()
{
if(document.getElementById("chk").checked)
{
attachFilter(document.getElementById('tbl'), 1);
}
else
{
document.getElementById('tbl').detachFilter();
}
}

in .jsp
-------

Enable Filter

It is giving me an object unexpected error. Any ideas?

Similarily, when I call the detach function seperately it gives the exact same error.

Thanks!,

Akshay

ahooja

Re: Enable/Disable filter question

WoutL27-Jun-06 20:37

27-Jun-06 20:37

Without knowing your HTML code, I do not know where it is going wrong. The one thing I can think of is that you do not have a table with id 'tbl' in your page.

Wout Louwers

Re: Enable/Disable filter question

dribagnac22-Jan-07 2:21

22-Jan-07 2:21

Modify within .js file the following function : attachFilter

old code :
var opt = document.createElement("select");
opt.onchange = filter;

c.appendChild(opt);

new code :
if (table.tHead.rows[0].cells[i].className != "noFilter") {
var opt = document.createElement("select");
opt.onchange = filter;

c.appendChild(opt);
}

And within your HTML code modify the thead of your table :

Column_Not_Filtered Works with IE6 and FF

Realmente bueno el código....

Juan Melgar20-Apr-06 14:52

20-Apr-06 14:52

This code it's really cool, I'm still trying to figure out how it works, but it works and in an easy way.

Just one thing, maybe in another version, add some combo () formatting options. At least a sizing option for each combo dinamically created.

Gracias por el tiempo ahorrado Smile | :)

Smile | :)

Godskyller

pcockey15-Feb-06 13:58

15-Feb-06 13:58

First off, excellent code. I've had a hard time finding something like this that works in Firefox.

I have a fairly huge table to filter, and before I jump into coding, I wanted to ask something. Let's say I have a table cell that needs to include both string1 and string2. Would a "string1, string2" in the cell include it under both filters? Thanks again.

Re: Quick question

WoutL16-Feb-06 0:15

16-Feb-06 0:15

Hi pcockey

I do not quite understand your question. But the tablefilter is build to filter on a single value. Filtering on two or more values is not supported.
I hope this answers your question.

Wout Louwers

Re: Quick question

pcockey16-Feb-06 10:08

16-Feb-06 10:08

Yep, that does indeed answer it. Thanks much.

henk jansen11-Oct-05 3:27

11-Oct-05 3:27

This is a truly nice peace of code. As mentioned earlier i think it would be a valuable addition if one could select the row(s) to filter from.

WoutL11-Oct-05 3:34

11-Oct-05 3:34

I think you mean columns instead of rows?

If I have the time I will add such on option. But I cannot promise anything.

Wout Louwers

Additional Function

klmohr7-Oct-05 15:21

7-Oct-05 15:21

I gave this bit of code to our web developer and they were able to get it working.

On the table we are displaying we have a check box in each row. We have added a "check all" feature that works fine on the unfiltered table, but when it is filtered the "check all feature does not work.

Is there a modifiction we can make to enable the check all feature on the filtered list?

Thanks!

Re: Additional Function

WoutL11-Oct-05 21:08

11-Oct-05 21:08

I do not know how your check all feature works, but you can test each row on visibility (filtered or not) by looking at the row.style.display value.

Wout Louwers

Re: Additional Function

klmohr12-Oct-05 15:15

12-Oct-05 15:15

Thank you I will pass the word along.

Some Html/css resources.

Anonymous14-Aug-05 2:56

14-Aug-05 2:56

I suggest some html/css resouces in ;Phttp://www.ebook5.com/eBook5list.aspx?subcatid=145&selection=2[^]

Nice! Works for Opera 8.02!

Denis Chekhlov11-Aug-05 23:50

11-Aug-05 23:50

It works nicely for my Opera 8.02 Smile | :)

Smile | :)

.
Thank you for publishing this code Smile | :)

Smile | :)

. It is really usefull. Thanks.

Firefox extension...

Oskar Austegard11-Aug-05 2:58

Oskar Austegard

11-Aug-05 2:58

Nice little feature.

Now what would be even nicer would be to turn this script into a firefox extension/GreaseMonkey userscript that would allow a user to filter any table on any web-page...

Also (without looking at the code) it seems you should be able to apply something similar to this to sort tables on the client?

Oskar
http://austegard.blogspot.com

-- modified at 10:59 Tuesday 4th October, 2005

ieaeitsch5-Aug-05 5:34

5-Aug-05 5:34

I tried to make something like this on my one for a long time. But after trying a while a throwed to code away, because it hasn't work in the way I wanted.

Now I found your solution and I'm very inspired about your work.

Very good. Smile | :)

Smile | :)

Exactly what I have spent hours looking for

edhenry303244-Aug-05 5:20

4-Aug-05 5:20

Great Job !!!! Cool | :cool:

Cool | :cool:

Prasad Khandekar4-Aug-05 1:22

Prasad Khandekar

4-Aug-05 1:22

Hello,

Thank's a lot for sharing this idea. It's really useful code to use. Keep it up.

Regards,

Prasad P. Khandekar
Knowledge exists, man only discovers it.

Populate1232-Aug-05 23:10

2-Aug-05 23:10

Hi,

Great Work!!!

You had done pretty wonderfull job. It can be utilized ten thousand cases.

Good! keep the good work moving.

Cheers!

Himadrish Laha

jairajsun29-Jul-05 12:22

29-Jul-05 12:22

Hi, I like your code and within minutes I was able to use it in my table. One thing I would like to see is how to exclude a particular column from displaying the filter dropdown.
for eg. I have a column which has an image and another with the edit button, I do not want to display dropdowns in those columns. Can you add that feature or is it already present? This way it will be more practical to use it.

Rajesh

Re: Pretty Cool

WoutL30-Jul-05 9:52

30-Jul-05 9:52

Glad to hear it is easy to use. That was the purpose of the code. I will try to add the option you ask for soon.

Wout Louwers

I haven't actually looked at the code yet, but...

Ashaman29-Jul-05 3:01

29-Jul-05 3:01

Damn, this is cool.

Thanks!

<going to="" rate="" the="" article="" now...="">

Sample? Demo project?

fwsouthern28-Jul-05 5:03

28-Jul-05 5:03

Sure would be nice ..... Maybe just a html page that demonstrates the function?

Re: Sample? Demo project?

WoutL28-Jul-05 7:43

28-Jul-05 7:43

This page is demonstrating the code. Just look at the Demo section.
I know the formatting of the table is not good. But I asked for an update for the article with the styles.

Wout Louwers

Re: Sample? Demo project?

Dan F28-Jul-05 13:48

28-Jul-05 13:48

You might consider pointing that out in bold characters in the article. I missed it completely, just assumed that that was a screenshot up there at the top of the article.

Very very spiffy idea!

General News Suggestion Question Bug Answer Joke Praise Rant Admin

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Go to top