HTML Table Filter ala Excel

WoutL

Rate me:

4.75/5 (37 votes)

3 Aug 2005CPOL1 min read

228K

2.3K

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

Download source files - 1.6 KB

Demo

<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

Re: One filter for 3 columns: it´s possible?

WoutL14-Jan-07 21:00

WoutL

14-Jan-07 21:00

Of course it is possible. But you will have to change the script.

Wout Louwers

Re: One filter for 3 columns: it´s possible?

OdaScatolini15-Jan-07 5:00

OdaScatolini

15-Jan-07 5:00

thanks for the reply, but what I need to know is if somebody already done this, because i don´t know how to do... Thanks!

help please!

OdaScatolini10-Jan-07 7:24

OdaScatolini

10-Jan-07 7:24

hello, sorry about my ignorance, but in:

function attachFilter(table, filterRow)

the term "table" is the name of the file that contents the table? In wich format?

Thanks a lot

Odair from Brazil

Re: help please!

WoutL10-Jan-07 20:37

WoutL

10-Jan-07 20:37

Hi Odair,

table is the DOM element. You could use somthing like:

attachFilter(document.getElementById('tbl'), 1)

Wout Louwers

no filter for one column

devzo31-Oct-06 1:28

devzo

31-Oct-06 1:28

How can i remove the filter from just one column?
I have in my table some columns witch I don't want to filter, but the others yes.

Re: no filter for one column

WoutL31-Oct-06 21:01

WoutL

31-Oct-06 21:01

Sorry,

That feature is not implemented.

Wout Louwers

Re: no filter for one column

dribagnac22-Jan-07 2:23

dribagnac

22-Jan-07 2:23

Modify within .js file the following function : attachFilter

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

c.appendChild(opt);

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

c.appendChild(opt);
}

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

Column_Not_Filtered Works with IE6 and FF

Re: no filter for one column

dribagnac22-Jan-07 2:33

dribagnac

22-Jan-07 2:33

This is my whole script, it is better to give full code Smile | :)

---------------
/*
http://www.codeproject.com/jscript/filter.asp
Using the code is very simple. Just include the script to the page:

And activate the filter in the OnLoad:

attachFilter expects two parameters:

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

within thead to avoid filtering
*/
// Attach the filter to a table. filterRow specifies the rownumber at which the filter should be inserted.
function attachFilter(table, filterRow)
{
table.filterRow = filterRow;
// Check if the table has any rows. If not, do nothing
if(table.rows.length > 0)
{
// Insert the filterrow on header and add cells whith drowdowns.
var filterRow = table.tHead.insertRow(table.filterRow);
for(var i = 0; i < table.rows[table.filterRow + 1].cells.length; i++)
{
var c = document.createElement("TH");
//table.rows[table.filterRow].appendChild(c);

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

c.appendChild(opt);
}
}
// Set the functions
table.fillFilters = fillFilters;
table.inFilter = inFilter;
table.buildFilter = buildFilter;
table.showAll = showAll;
table.alternateRowColorTable = alternateRowColorTable;
table.detachFilter = detachFilter;
table.filterElements = new Array();

// Fill the filters
table.fillFilters();
table.filterEnabled = true;
}
}

function detachFilter()
{
if(this.filterEnabled)
{
// Remove the filter
this.showAll();
this.deleteRow(this.filterRow);
this.filterEnabled = false;
}
}

// Checks if a column is filtered
function inFilter(col)
{
for(var i = 0; i < this.filterElements.length; i++)
{
if(this.filterElements[i].index == col)
return true;
}
return false;
}

// Fills the filters for columns which are not fiiltered
function fillFilters()
{
for(var col = 0; col < this.rows[this.filterRow].cells.length; col++)
{
if(!this.inFilter(col))
{
//alert(col.className)
//alert(this.tHead.rows[0].cells[col].className)
if (this.tHead.rows[0].cells[col].className != "noFilter") {
this.buildFilter(col, "(all)");
}
}
}
}

// Fills the columns dropdown box.
// setValue is the value which the dropdownbox should have one filled.
// If the value is not suplied, the first item is selected
function buildFilter(col, setValue)
{
// Get a reference to the dropdownbox.
var opt = this.rows[this.filterRow].cells[col].firstChild;

// remove all existing items
while(opt.length > 0)
opt.remove(0);

var values = new Array();

// put all relevant strings in the values array.
for(var i = this.filterRow + 1; i < this.rows.length; i++)
{
var row = this.rows[i];
if(row.style.display != "none" && row.className != "noFilter")
{
values.push(row.cells[col].innerHTML.toLowerCase());
}
}
values.sort();

//add each unique string to the dopdownbox
var value;
for(var i = 0; i < values.length; i++)
{
if(values[i].toLowerCase() != value)
{
value = values[i].toLowerCase();
opt.options.add(new Option(values[i], value));
}
}

opt.options.add(new Option("(all)", "(all)"), 0);

if(setValue != undefined)
opt.value = setValue;
else
opt.options[0].selected = true;
}

// This function is called when a dropdown box changes
function filter()
{
var table = this; // 'this' is a reference to the dropdownbox which changed
while(table.tagName.toUpperCase() != "TABLE")
table = table.parentNode;

var filterIndex = this.parentNode.cellIndex; // The column number of the column which should be filtered
var filterText = table.rows[table.filterRow].cells[filterIndex].firstChild.value;

// First check if the column is allready in the filter.
var bFound = false;

for(var i = 0; i < table.filterElements.length; i++)
{
if(table.filterElements[i].index == filterIndex)
{
bFound = true;
// If the new value is '(all') this column is removed from the filter.
if(filterText == "(all)")
{
table.filterElements.splice(i, 1);
}
else
{
table.filterElements[i].filter = filterText;
}
break;
}
}
if(!bFound)
{
// the column is added to the filter
var obj = new Object();
obj.filter = filterText;
obj.index = filterIndex;
table.filterElements.push(obj);
}

// first set all rows to be displayed
table.showAll();

// the filter ou the right rows.
for(var i = 0; i < table.filterElements.length; i++)
{
// First fill the dropdown box for this column
table.buildFilter(table.filterElements[i].index, table.filterElements[i].filter);
// Apply the filter
for(var j = table.filterRow + 1; j < table.rows.length; j++)
{
var row = table.rows[j];

if(table.style.display != "none" && row.className != "noFilter")
{
if(table.filterElements[i].filter != row.cells[table.filterElements[i].index].innerHTML.toLowerCase())
{
row.style.display = "none";
}
}
}
}
// Fill the dropdownboxes for the remaining columns.
table.fillFilters();
table.alternateRowColorTable();
}

function showAll()
{
for(var i = this.filterRow + 1; i < this.rows.length; i++)
{
this.rows[i].style.display = "";
}
}

function alternateRowColorTable() {
if(document.getElementsByTagName){
var rows = this.getElementsByTagName("tr");
var j=0;

for(i = 0; i < rows.length; i++){
//manipulate rows if row is displayed
if (rows[i].style.display != "none") {
if(j % 2 == 0){
rows[i].className = "even";
}else{
rows[i].className = "odd";
}

j++;
}
}
}
}

New Features

justinkelly23-Jul-06 20:30

justinkelly

23-Jul-06 20:30

Hi All,

first off, great script

but i believe it could be improved if you could have plain input boxed to type a filter in instead of drop down boxes for all (if you've got 1000s of unique rows then the select box becomes to big and not user friendly) - similar to http://resource.jsmadeeasy.com/viewscript.asp?scriptid=507

also quick question:
ive added the noFilter class to one of the columns i dont want filtered, but it still displays the filter. am i missing anything??
######code#####
Action (this is in php)
###############

Cheers

Justin

Changing the font/color of the cell

ahooja28-Jun-06 11:40

ahooja

28-Jun-06 11:40

Hi,

I was wondering if, and how, you can change the font/color/bgcolor of the cells. The formatting seems to go away once the filter is applied.

Thanks!,

Akshay

ahooja

Re: Changing the font/color of the cell

WoutL28-Jun-06 20:55

WoutL

28-Jun-06 20:55

If you use CSS for your formatting it should work.

Wout Louwers

Enable/Disable filter question

ahooja27-Jun-06 7:03

ahooja

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

WoutL

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

dribagnac

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

Juan Melgar

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 | :)

Godskyller

Quick question

pcockey15-Feb-06 13:58

pcockey

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

WoutL

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

pcockey

16-Feb-06 10:08

Yep, that does indeed answer it. Thanks much.

Great Job

henk jansen11-Oct-05 3:27

henk jansen

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.

Re: Great Job

WoutL11-Oct-05 3:34

WoutL

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

klmohr

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

WoutL

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

klmohr

12-Oct-05 15:15

Thank you I will pass the word along.

Some Html/css resources.

Anonymous14-Aug-05 2:56

Anonymous

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