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

224.5K

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

WoutL15-Jan-07 2:08

15-Jan-07 2:08

Firefox does support textContent. So with those two properties you could edit the script to be 'cross-browser'

Wout Louwers

arizen15-Jan-07 2:12

15-Jan-07 2:12

Oh.. I`haven`t understood your post for the first time Big Grin | :-D

Big Grin | :-D

(I really need to have a sleep today). Firefox does not support innertext property, I`ve managed to resolve my problem by using innerHTML.replace(/<[^>]+>/g,""). Thank you for a tip!

One filter for 3 columns: it´s possible?

OdaScatolini12-Jan-07 5:33

12-Jan-07 5:33

Thanks for the reply! Now I have a new doubt:
I need a pull down menu that filter 3 columns, its possible? if the word selected in the menu appear in 1 of the tree columns of a row, then the row is selected. Then the first line of the table, with the labels, would have the tree cells merged, and in the lines after the cells wouldn´t be merged. Can you understand? It is possible?

Sorry for my bad english and thanks for the atention!

Odair from Brazil

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

WoutL14-Jan-07 21:00

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

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!

OdaScatolini10-Jan-07 7:24

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

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

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

31-Oct-06 21:01

Sorry,

That feature is not implemented.

Wout Louwers

Re: no filter for one column

dribagnac22-Jan-07 2:23

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

22-Jan-07 2:33

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

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++;
}
}
}
}

justinkelly23-Jul-06 20:30

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

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

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

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

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