Tuesday, January 8, 2008

HTML Table Filter ala Excel

HTML Table Filter ala Excel (CodeProject)
A way to filter a large table in a simple manner.
Download source files - 1.6 Kb

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:
<script language="javascript" src="tablefilter.js"></script>
And activate the filter in the OnLoad:
<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.

No comments: