Article

HTML Table Filter ala Excel

WoutL

Rate me:

4.75/5 (37 votes)

3 Aug 2005CPOL1 min read

223.9K

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

Filter returns the whole code plus value.

chunchuyo8-Jul-10 5:26

chunchuyo

8-Jul-10 5:26

Hi I am experincing a funny thing, the filter returns all the code from the value properties.

What I mean is:
Table
______________
¦Server¦Brand¦
¦Win1 ¦HP¦
¦Win2¦DEll¦
--------------

when I click on the pull down menu i get in the pull down menu:
________________________
¦WIN1 ¦
¦________________________¦
¦<-STRONG>Win2<-/STRONG> ¦
¦________________________¦
I added the - after the < so you can see what I get,when not the text will be show as bold here $Shucks | :-\$ .

So, any text (result) in the table that has a property like color, size or boldness will be shown in the "filter pull down menu" as html code.

Text, with no properties at all like "win 1"are ok.

Thx for the help.

tablefilter and paging

braveheart0131-May-10 1:28

braveheart01

31-May-10 1:28

Hi,
at first, thank you for the excellennt code. Your tablefilter ist the best solution to realize an autofilter to the good old datagrid. But I have onde question: is it possible to disable the filter when the grid is in paging mode?? If I switch to paging the comboboxes are shown in row 0 without any items; this does not look good so I am looking for a solution to disable the filter. Do you have any idea??
Thank you.
Best regards
Guntram Sartoris

Re: tablefilter and paging

WoutL31-May-10 1:51

WoutL

31-May-10 1:51

You can use the function detachFilter() for this. Usage:

var table = document.getElementById("Your table ID");
table.detachFilter();

Wout Louwers

Hello !

ehuddrey11-Nov-09 10:19

ehuddrey

11-Nov-09 10:19

hi i will be happy if you can help .
im new to this and i dont really know how to "Attach the filter to a table" as detailed in the script
is there a sample of a working table with the values in it so i can do that? [ cause when i put it on my website nothing appears ]

thank you very much !

Re: Hello !

WoutL11-Nov-09 20:47

WoutL

11-Nov-09 20:47

Can you post the code that you use on your website? Maybe I can help.

Wout Louwers

Can the dropdown filter be restricted to a single column?

klsblues1-Jul-09 4:20

klsblues

1-Jul-09 4:20

Superb piece of code - much appreciated, but can the dropdown boxes across the top row only be displayed and added to a specific column?
i.e. - I only want column one to have a search (combobox) with no other columns being able to be searched, so I do not want any formatting to the rest of the column heads.

Re: Can the dropdown filter be restricted to a single column?

WoutL12-Jul-09 22:11

WoutL

12-Jul-09 22:11

You will have to modify the script to achieve that

Wout Louwers

Re: Can the dropdown filter be restricted to a single column?

Member 1247297620-Apr-16 3:57

Member 12472976

20-Apr-16 3:57

If I understand your problem correct...

You could add following code last in the buildFilter function

if (row.cells[col].className == "MyHiddenColumn")
{
    opt.style.display = 'none';
}

Then just add a class called "MyHiddenColumn" to whatever column where you wish to hide the filter.

In your case you should add "MyHiddenColumn"-class (or what you call it) to all columns except for one, the one you restrict the filter to.

PS.
Great code by the way! Smile | :)

How to make the filtering work for the dropdown list column

vijay_kumar16-Dec-08 0:32

vijay_kumar

16-Dec-08 0:32

Hi,

It is working excellent for the read only columns. I did a workaround to make it for the text box columns. Is there a way I can make it work for the columns containing a drop down list.

thanks
Vijay

Re: How to make the filtering work for the dropdown list column

WoutL16-Dec-08 1:12

WoutL

16-Dec-08 1:12

It should be similar to adding the text boxes. But I think you have to filter them on selectedValue.

Wout Louwers

updated JS for CUSTOM Filtering

Dhruv P Patel7-May-08 5:56

Dhruv P Patel

7-May-08 5:56

<br />
// Attach the filter to a table. filterRow specifies the rownumber at which the filter should be inserted.<br />
<br />
// div elemnet where floating form for searching will get display<br />
var customDiv = "customDiv";<br />
// activityType for maintaining search activity<br />
var activityType = "";<br />
// keyword that need to be filter<br />
var keyword = "";<br />
// temp object that handle table object used when control is lost from <br />
// dropdown and called by floating form<br />
var tempTable;<br />
<br />
// used to maintain index of filterElements <br />
var tenmpIndex;<br />
<br />
// used to maintain FilterIndex  <br />
var tempFilterIndex;<br />
<br />
// used to maintain last index <br />
var isDisplayed= false;<br />
<br />
// add floating div<br />
document.write("<div id=""+customDiv+"" style="display:none;z-index:10;background:#E9EDD1;padding:4px;position:absolute;width:280px;border: 2px solid #D0D79F;"></div>");<br />
<br />
// cols ="all" means filter all column<br />
// cols ="0,2,4" column id 0 based index   <br />
function attachFilter(table, filterRow,cols)<br />
{<br />
	table.filterRow = filterRow;<br />
	table.filterCol = cols;<br />
	//get list of all columns<br />
	var filterColumns = cols.split(",");<br />
	<br />
	// Check if the table has any rows. If not, do nothing<br />
	if(table.rows.length > 0)<br />
	{<br />
		// Insert the filterrow and add cells whith drowdowns.<br />
		var filterRow = table.insertRow(table.filterRow);<br />
		var showFilter = false;<br />
		for(var i = 0; i < table.rows[table.filterRow + 1].cells.length; i++)<br />
		{<br />
			if(cols == "all")<br />
			{<br />
				//if show all columns  <br />
				showFilter = true;<br />
			}<br />
			else<br />
			{<br />
				//if selected then check if for correct column no<br />
				showFilter = false;<br />
				for(var index = 0; index < filterColumns.length &&  !showFilter ; index++)<br />
				{<br />
					if(i == filterColumns[index])<br />
						showFilter = true;<br />
				}<br />
			}<br />
			var c = document.createElement("TH");<br />
			table.rows[table.filterRow].appendChild(c);<br />
			// check if column need to be filtered<br />
			if(showFilter)<br />
			{<br />
				var opt = document.createElement("select");<br />
				opt.onchange = filter;<br />
				c.appendChild(opt);<br />
			}<br />
		}<br />
		// Set the functions<br />
		table.fillFilters = fillFilters;<br />
		table.inFilter = inFilter;<br />
		table.buildFilter = buildFilter;<br />
		table.showAll = showAll;<br />
		table.detachFilter = detachFilter;<br />
		table.filterElements = new Array();<br />
		<br />
		// Fill the filters<br />
		table.fillFilters();<br />
		table.filterEnabled = true;<br />
	}<br />
}<br />
<br />
<br />
function detachFilter()<br />
{<br />
	if(this.filterEnabled)<br />
	{<br />
		// Remove the filter<br />
		this.showAll();<br />
		this.deleteRow(this.filterRow);<br />
		this.filterEnabled = false;<br />
	}<br />
}<br />
<br />
// Checks if a column is filtered<br />
function inFilter(col)<br />
{<br />
	for(var i = 0; i < this.filterElements.length; i++)<br />
	{<br />
		if(this.filterElements[i].index == col)<br />
			return true;<br />
	}<br />
	return false;<br />
}<br />
<br />
// Fills the filters for columns which are not fiiltered<br />
function fillFilters()<br />
{<br />
	// check if request for all columns<br />
	if(this.filterCol == "all")<br />
	{<br />
		for(var col = 0; col < this.rows[this.filterRow].cells.length; col++)<br />
		{<br />
			// check if column is present or not<br />
			if(!this.inFilter(col))<br />
			{<br />
				// add column<br />
				this.buildFilter(col, "(all)");<br />
			}<br />
		}<br />
	}<br />
	else<br />
	{<br />
		// get list for selected columns<br />
		var cols = this.filterCol.split(",");<br />
		var col = 0;<br />
		for(var index = 0; index < cols.length; index++)<br />
		{<br />
			col = cols[index];<br />
			// check if column is present or not<br />
			if(!this.inFilter(col))<br />
			{<br />
				// add column<br />
				this.buildFilter(col, "(all)");<br />
			}<br />
		}<br />
	}<br />
}<br />
<br />
// Fills the columns dropdown box. <br />
// setValue is the value which the dropdownbox should have one filled. <br />
// If the value is not suplied, the first item is selected<br />
function buildFilter(col, setValue)<br />
{<br />
	// Get a reference to the dropdownbox.<br />
	var table;<br />
	// can be called on change in dropdown or by form<br />
	<br />
	if(this.rows != undefined)<br />
	{<br />
		//called from dropdown change<br />
		table = this;<br />
	}<br />
	else<br />
	{<br />
		//called from form so take tempTable<br />
		table = tempTable;<br />
	}	<br />
	<br />
	var opt = table.rows[table.filterRow].cells[col].firstChild;<br />
	<br />
	// remove all existing items<br />
	while(opt.length > 0)<br />
		opt.remove(0);<br />
	<br />
	var values = new Array();<br />
		<br />
	// put all relevant strings in the values array.<br />
	for(var i = table.filterRow + 1; i < table.rows.length; i++)<br />
	{<br />
		var row = table.rows[i];<br />
		if(row.style.display != "none" && row.className != "noFilter")<br />
		{<br />
			values.push(row.cells[col].innerHTML.toLowerCase());<br />
		}<br />
	}<br />
	values.sort();<br />
	<br />
	//add each unique string to the dopdownbox<br />
	var value;<br />
	for(var i = 0; i < values.length; i++)<br />
	{<br />
		if(values[i].toLowerCase() != value)<br />
		{<br />
			value = values[i].toLowerCase();<br />
			opt.options.add(new Option(values[i], value));<br />
		}<br />
	}<br />
<br />
	// add another option for selecting custom feature<br />
	opt.options.add(new Option("(custom)", "(custom)"), 0);<br />
	opt.options.add(new Option("(all)", "(all)"), 0);<br />
<br />
	if(setValue != undefined)<br />
		opt.value = setValue;<br />
	else<br />
		opt.options[0].selected = true;<br />
}<br />
<br />
// this function get caled when some one enter custom text and then say OK<br />
function setCustomValues()<br />
{<br />
	activityType = document.customForm.activityType.options[document.customForm.activityType.selectedIndex].value;<br />
	keyword = document.customForm.keyword.value;<br />
	activityType = trim(activityType);<br />
	// check for keyword<br />
	if(trim(keyword) == "")<br />
	{<br />
		// if keyword is blank then revert back<br />
		clearCustomValues()<br />
		return false;<br />
	}<br />
	// get meta Regex for keyword <br />
	keyword = getRegexMetaString(new String(keyword));<br />
	<br />
	if(activityType == "contains")<br />
	{<br />
		keyword = keyword;<br />
	}<br />
	else if(activityType == "equals")<br />
	{<br />
		keyword = "^"+keyword+"$";<br />
	}<br />
	else if(activityType == "startWith")<br />
	{<br />
		keyword = "^"+keyword;<br />
	}<br />
	else if(activityType == "endWith")<br />
	{<br />
		keyword = keyword+"$";<br />
	}<br />
<br />
	// check if tempIndex = -1 means some is selected custom and it is not present in filterElements list <br />
	if(tempIndex == -1)<br />
	{<br />
		// entry is not there so add before applying filter<br />
		var obj = new Object();<br />
		// it is actual pattern to match<br />
		obj.filter = keyword;<br />
		// previous is added to come back to lst valid state<br />
		obj.previous = keyword;<br />
		// assigning proper column index<br />
		obj.index = tempFilterIndex;<br />
		// wht is to be dislpay in dropdown<br />
		obj.display = "(custom)";<br />
		// add new obj to filterElements<br />
		tempTable.filterElements.push(obj);<br />
	}<br />
	else<br />
	{<br />
		// just change statistics of filterElements<br />
		tempTable.filterElements[tempIndex].display = "(custom)";<br />
		tempTable.filterElements[tempIndex].filter = keyword;<br />
		tempTable.filterElements[tempIndex].previous = keyword;<br />
	}<br />
	// apply all filters and display<br />
	showFilters(tempTable);<br />
	// reset all common variables<br />
	resetValues();<br />
	//hide the floating form<br />
	hideMatchingForm();<br />
	// return false to prevent page refreshing<br />
	return false;<br />
}<br />
<br />
//this function is called when some one doesnt want to apply custom filtering<br />
function clearCustomValues()<br />
{<br />
	// hide the floating form<br />
	hideMatchingForm();<br />
	<br />
	for(var i = 0; i < tempTable.filterElements.length; i++)<br />
	{<br />
		if(tempTable.filterElements[i].index == tempFilterIndex)<br />
		{<br />
			//alert(tempFilterIndex + " - "+tempTable.filterElements[i].filter+" - " +tempTable.filterElements[i].previous);<br />
			//set display to last valid state of dropdown box<br />
			tempTable.filterElements[i].filter = tempTable.filterElements[i].previous;<br />
		}<br />
	}<br />
	// apply all filters<br />
	showFilters(tempTable);<br />
	// reset all common variables<br />
	resetValues();<br />
}<br />
function resetValues()<br />
{<br />
	// resetting all values<br />
	activityType = "";<br />
	keyword= "";<br />
	tempTable = null;<br />
	tempIndex = -1;<br />
	tempFilterIndex = -1;<br />
	isDisplayed = false;<br />
}<br />
<br />
function trim(str)<br />
{<br />
	return str.replace(/(\s+$)|(^\s+)/g, '');<br />
	<br />
}<br />
// This function is called when a dropdown box changes<br />
function filter()<br />
{<br />
	// check if some one is selected custom but not using it<br />
	if(isDisplayed)<br />
	{<br />
		// if it is then reset last column by last valid state in drop down box<br />
		//alert("displayed "+tempFilterIndex);<br />
		// hide floating form<br />
		hideMatchingForm();<br />
		<br />
		for(var i = 0; i < tempTable.filterElements.length; i++)<br />
		{<br />
			if(tempTable.filterElements[i].index == tempFilterIndex)<br />
			{<br />
				//alert(tempFilterIndex + " - "+tempTable.filterElements[i].filter+" - " +tempTable.filterElements[i].previous);<br />
				//set display to last valid state of dropdown box<br />
				tempTable.filterElements[i].filter = tempTable.filterElements[i].previous;<br />
			}<br />
		}<br />
	}<br />
	<br />
	var table = this; // 'this' is a reference to the dropdownbox which changed<br />
	while(table.tagName.toUpperCase() != "TABLE")<br />
		table = table.parentNode;<br />
<br />
	var filterIndex = this.parentNode.cellIndex; // The column number of the column which should be filtered<br />
	var filterText = table.rows[table.filterRow].cells[filterIndex].firstChild.value;<br />
	var display = filterText;<br />
	// First check if the column is allready in the filter.<br />
	var bFound = false;<br />
	<br />
	for(var i = 0; i < table.filterElements.length; i++)<br />
	{<br />
		//alert(table.filterElements[i].index + " -" +table.filterElements[i].filter);<br />
		if(table.filterElements[i].index == filterIndex)<br />
		{<br />
			bFound = true;<br />
			// If the new value is '(all') this column is removed from the filter.<br />
			if(filterText == "(all)")<br />
			{<br />
				//remove from filterElements if all is selected <br />
				table.filterElements.splice(i, 1);<br />
			}<br />
			else if(filterText == "(custom)")<br />
			{<br />
				// if custom is selected then take backup of required variables<br />
				// reference cant be regenerate from form<br />
				// so assign to tempvariables<br />
				tempTable = table;<br />
				tempFilterIndex = filterIndex;<br />
				tenmpIndex = i;<br />
				//display form and return dont apply filter<br />
				displayMatchingForm();<br />
				return;<br />
			}<br />
			else<br />
			{<br />
				// if normal is there then just change entry details in filterElements <br />
				table.filterElements[i].display = filterText;<br />
				table.filterElements[i].filter = "^"+getRegexMetaString(new String(filterText))+"$";<br />
				table.filterElements[i].previous = table.filterElements[i].filter;<br />
			}<br />
			break;<br />
		}<br />
	}<br />
	if(!bFound)<br />
	{<br />
		// the column is added to the filter if no other selection is done <br />
		if(filterText == "(custom)")<br />
		{<br />
			//take backup and display form<br />
			tempTable = table;<br />
			tempFilterIndex = filterIndex;<br />
			tempIndex = -1;<br />
			<br />
			displayMatchingForm();<br />
			return;<br />
		}<br />
		//if not found and other then add in filterElements  <br />
		var obj = new Object();<br />
		obj.filter = "^"+getRegexMetaString(new String(filterText))+"$";<br />
		obj.previous = obj.filter;<br />
		obj.index = filterIndex;<br />
		obj.display = display;<br />
		table.filterElements.push(obj);<br />
	}<br />
	//finally apply filters<br />
	showFilters(table);<br />
	<br />
}<br />
<br />
function showFilters(table)<br />
{<br />
	// first set all rows to be displayed<br />
	table.showAll();<br />
	<br />
	// the filter ou the right rows.<br />
	for(var i = 0; i < table.filterElements.length; i++)<br />
	{<br />
		// First fill the dropdown box for this column<br />
		// reset dropdownbox with display name<br />
		table.buildFilter(table.filterElements[i].index, table.filterElements[i].display);<br />
		<br />
		// build regex from filterElements final filter pattern<br />
		var regEx = new RegExp(table.filterElements[i].filter);<br />
		// Apply the filter<br />
		for(var j = table.filterRow + 1; j < table.rows.length; j++)<br />
		{<br />
			var row = table.rows[j];<br />
			<br />
			if(table.style.display != "none" && row.className != "noFilter")<br />
			{<br />
				// if match is not found then hide<br />
				if(!row.cells[table.filterElements[i].index].innerHTML.toLowerCase().match(regEx))<br />
				{<br />
					row.style.display = "none";<br />
				}<br />
				/*<br />
				if(table.filterElements[i].filter != row.cells[table.filterElements[i].index].innerHTML.toLowerCase())<br />
				{<br />
					row.style.display = "none";<br />
				}<br />
				*/<br />
			}<br />
		}<br />
	}<br />
	// Fill the dropdownboxes for the remaining columns.<br />
	table.fillFilters();<br />
}<br />
<br />
function showAll()<br />
{<br />
	for(var i = this.filterRow + 1; i < this.rows.length; i++)<br />
	{<br />
		this.rows[i].style.display = "";<br />
	}<br />
}<br />
<br />
<br />
<br />
// display form<br />
function hideMatchingForm()<br />
{<br />
	document.getElementById(customDiv).style.display ='none';<br />
	isDisplayed = false;<br />
}<br />
<br />
// create form on runtime and display<br />
function displayMatchingForm()<br />
{<br />
	activityType ="";<br />
	isDisplayed= true;<br />
    var width = 300;<br />
    var height = 50;<br />
    var left = (screen.width - width) /2;<br />
    var top = (screen.height - height)/3;<br />
    var top = 10;<br />
	<br />
	<br />
	//document.getElementById(customDiv).style.width = width + 'px';<br />
    //document.getElementById(customDiv).style.height = height + 'px';<br />
    document.getElementById(customDiv).style.left = left + 'px';<br />
    document.getElementById(customDiv).style.top = top + 'px';<br />
	var addContent = <br />
		"<form name="customForm" onsubmit="return setCustomValues();">"+<br />
   			"<table width="40%">"+<br />
				"<tr>"+<br />
					"<td>"+<br />
						"<select name="activityType" style="width:100px">"+<br />
							"<option selected="" value="contains"> Contains</option>"+<br />
							"<option value="equals"> Equals</option>"+<br />
							"<option value="startWith"> Start With</option>"+<br />
							"<option value="endWith"> End With</option>"+<br />
						"</select>"+<br />
					"</td>"+<br />
					"<td>"+<br />
						"<input type="text" size="20" name="keyword">"+<br />
					"</input></td>"+<br />
				"</tr>"+<br />
				"<tr>"+<br />
					"<td>"+<br />
						"<input type="submit" style="width:100px" value="ok">"+<br />
					"</input></td>"+<br />
					"<td>"+<br />
						"<input type="button" style="width:100px" value="cancel" onclick="clearCustomValues();">"+<br />
					"</input></td>"+<br />
				"</tr>"+<br />
			"</table>"+<br />
		"</form>";<br />
	<br />
    // add to your div an header	<br />
	document.getElementById(customDiv).innerHTML = addContent;<br />
	//alert(document.getElementById(customDiv).innerHTML);<br />
	document.getElementById(customDiv).style.display ='';<br />
}<br />
<br />
// escape regex meta characters<br />
function getRegexMetaString(input)<br />
{<br />
		input = input.replace("\\","\\");<br />
		input = input.replace(".","\\.");<br />
		input = input.replace("|","\\|");<br />
		input = input.replace("(","\\(");<br />
		input = input.replace(")","\\)");<br />
		input = input.replace("{","\\{");<br />
		input = input.replace("}","\\}");<br />
		input = input.replace("[","\\[");<br />
		input = input.replace("]","\\]");<br />
		input = input.replace("*","\\*");<br />
		input = input.replace("+","\\+");<br />
		input = input.replace("?","\\?");<br />
		input = input.replace("^","\\^");<br />
		input = input.replace("$","\\$");<br />
<br />
		/*<br />
		input = input.replace("\\","\\\\");<br />
		input = input.replace(".","\\\\.");<br />
		input = input.replace("|","\\\\|");<br />
		input = input.replace("(","\\\\(");<br />
		input = input.replace(")","\\\\)");<br />
		input = input.replace("{","\\\\{");<br />
		input = input.replace("}","\\\\}");<br />
		input = input.replace("[","\\\\[");<br />
		input = input.replace("]","\\\\]");<br />
		input = input.replace("*","\\\\*");<br />
		input = input.replace("+","\\\\+");<br />
		input = input.replace("?","\\\\?");<br />
		input = input.replace("^","\\\\^");<br />
		input = input.replace("$","\\\\$");<br />
		*/<br />
		return input;<br />
}<br />
<br />

Re: updated JS for CUSTOM Filtering (More Info)

Dhruv P Patel7-May-08 5:59

Dhruv P Patel

7-May-08 5:59

display filter for "1,2,4,5" columns
------------------------------
attachFilter(document.getElementById('dataTable'), 0,"1,2,4,5");

display filter for all columns
------------------------------
attachFilter(document.getElementById('dataTable'), 0,"all");

updated JS for table filtering with CUSTOM

Dhruv P Patel7-May-08 5:53

Dhruv P Patel

7-May-08 5:53

// Attach the filter to a table. filterRow specifies the rownumber at which the filter should be inserted.

// div elemnet where floating form for searching will get display
var customDiv = "customDiv";
// activityType for maintaining search activity
var activityType = "";
// keyword that need to be filter
var keyword = "";
// temp object that handle table object used when control is lost from
// dropdown and called by floating form
var tempTable;

// used to maintain index of filterElements
var tenmpIndex;

// used to maintain FilterIndex
var tempFilterIndex;

// used to maintain last index
var isDisplayed= false;

// add floating div
document.write("<div id='"+customDiv+"' style='display:none;z-index:10;background:#E9EDD1;padding:4px;position:absolute;width:280px;border: 2px solid #D0D79F;'></div>");

// cols ="all" means filter all column
// cols ="0,2,4" column id 0 based index
function attachFilter(table, filterRow,cols)
{
table.filterRow = filterRow;
table.filterCol = cols;
//get list of all columns
var filterColumns = cols.split(",");

// Check if the table has any rows. If not, do nothing
if(table.rows.length > 0)
{
// Insert the filterrow and add cells whith drowdowns.
var filterRow = table.insertRow(table.filterRow);
var showFilter = false;
for(var i = 0; i < table.rows[table.filterRow + 1].cells.length; i++)
{
if(cols == "all")
{
//if show all columns
showFilter = true;
}
else
{
//if selected then check if for correct column no
showFilter = false;
for(var index = 0; index < filterColumns.length && !showFilter ; index++)
{
if(i == filterColumns[index])
showFilter = true;
}
}
var c = document.createElement("TH");
table.rows[table.filterRow].appendChild(c);
// check if column need to be filtered
if(showFilter)
{
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.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()
{
// check if request for all columns
if(this.filterCol == "all")
{
for(var col = 0; col < this.rows[this.filterRow].cells.length; col++)
{
// check if column is present or not
if(!this.inFilter(col))
{
// add column
this.buildFilter(col, "(all)");
}
}
}
else
{
// get list for selected columns
var cols = this.filterCol.split(",");
var col = 0;
for(var index = 0; index < cols.length; index++)
{
col = cols[index];
// check if column is present or not
if(!this.inFilter(col))
{
// add column
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 table;
// can be called on change in dropdown or by form

if(this.rows != undefined)
{
//called from dropdown change
table = this;
}
else
{
//called from form so take tempTable
table = tempTable;
}

var opt = table.rows[table.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 = table.filterRow + 1; i < table.rows.length; i++)
{
var row = table.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));
}
}

// add another option for selecting custom feature
opt.options.add(new Option("(custom)", "(custom)"), 0);
opt.options.add(new Option("(all)", "(all)"), 0);

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

// this function get caled when some one enter custom text and then say OK
function setCustomValues()
{
activityType = document.customForm.activityType.options[document.customForm.activityType.selectedIndex].value;
keyword = document.customForm.keyword.value;
activityType = trim(activityType);
// check for keyword
if(trim(keyword) == "")
{
// if keyword is blank then revert back
clearCustomValues()
return false;
}
// get meta Regex for keyword
keyword = getRegexMetaString(new String(keyword));

if(activityType == "contains")
{
keyword = keyword;
}
else if(activityType == "equals")
{
keyword = "^"+keyword+"$";
}
else if(activityType == "startWith")
{
keyword = "^"+keyword;
}
else if(activityType == "endWith")
{
keyword = keyword+"$";
}

// check if tempIndex = -1 means some is selected custom and it is not present in filterElements list
if(tempIndex == -1)
{
// entry is not there so add before applying filter
var obj = new Object();
// it is actual pattern to match
obj.filter = keyword;
// previous is added to come back to lst valid state
obj.previous = keyword;
// assigning proper column index
obj.index = tempFilterIndex;
// wht is to be dislpay in dropdown
obj.display = "(custom)";
// add new obj to filterElements
tempTable.filterElements.push(obj);
}
else
{
// just change statistics of filterElements
tempTable.filterElements[tempIndex].display = "(custom)";
tempTable.filterElements[tempIndex].filter = keyword;
tempTable.filterElements[tempIndex].previous = keyword;
}
// apply all filters and display
showFilters(tempTable);
// reset all common variables
resetValues();
//hide the floating form
hideMatchingForm();
// return false to prevent page refreshing
return false;
}

//this function is called when some one doesnt want to apply custom filtering
function clearCustomValues()
{
// hide the floating form
hideMatchingForm();

for(var i = 0; i < tempTable.filterElements.length; i++)
{
if(tempTable.filterElements[i].index == tempFilterIndex)
{
//alert(tempFilterIndex + " - "+tempTable.filterElements[i].filter+" - " +tempTable.filterElements[i].previous);
//set display to last valid state of dropdown box
tempTable.filterElements[i].filter = tempTable.filterElements[i].previous;
}
}
// apply all filters
showFilters(tempTable);
// reset all common variables
resetValues();
}
function resetValues()
{
// resetting all values
activityType = "";
keyword= "";
tempTable = null;
tempIndex = -1;
tempFilterIndex = -1;
isDisplayed = false;
}

function trim(str)
{
return str.replace(/(\s+$)|(^\s+)/g, '');

}
// This function is called when a dropdown box changes
function filter()
{
// check if some one is selected custom but not using it
if(isDisplayed)
{
// if it is then reset last column by last valid state in drop down box
//alert("displayed "+tempFilterIndex);
// hide floating form
hideMatchingForm();

for(var i = 0; i < tempTable.filterElements.length; i++)
{
if(tempTable.filterElements[i].index == tempFilterIndex)
{
//alert(tempFilterIndex + " - "+tempTable.filterElements[i].filter+" - " +tempTable.filterElements[i].previous);
//set display to last valid state of dropdown box
tempTable.filterElements[i].filter = tempTable.filterElements[i].previous;
}
}
}

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;
var display = filterText;
// First check if the column is allready in the filter.
var bFound = false;

for(var i = 0; i < table.filterElements.length; i++)
{
//alert(table.filterElements[i].index + " -" +table.filterElements[i].filter);
if(table.filterElements[i].index == filterIndex)
{
bFound = true;
// If the new value is '(all') this column is removed from the filter.
if(filterText == "(all)")
{
//remove from filterElements if all is selected
table.filterElements.splice(i, 1);
}
else if(filterText == "(custom)")
{
// if custom is selected then take backup of required variables
// reference cant be regenerate from form
// so assign to tempvariables
tempTable = table;
tempFilterIndex = filterIndex;
tenmpIndex = i;
//display form and return dont apply filter
displayMatchingForm();
return;
}
else
{
// if normal is there then just change entry details in filterElements
table.filterElements[i].display = filterText;
table.filterElements[i].filter = "^"+getRegexMetaString(new String(filterText))+"$";
table.filterElements[i].previous = table.filterElements[i].filter;
}
break;
}
}
if(!bFound)
{
// the column is added to the filter if no other selection is done
if(filterText == "(custom)")
{
//take backup and display form
tempTable = table;
tempFilterIndex = filterIndex;
tempIndex = -1;

displayMatchingForm();
return;
}
//if not found and other then add in filterElements
var obj = new Object();
obj.filter = "^"+getRegexMetaString(new String(filterText))+"$";
obj.previous = obj.filter;
obj.index = filterIndex;
obj.display = display;
table.filterElements.push(obj);
}
//finally apply filters
showFilters(table);

}

function showFilters(table)
{
// 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
// reset dropdownbox with display name
table.buildFilter(table.filterElements[i].index, table.filterElements[i].display);

// build regex from filterElements final filter pattern
var regEx = new RegExp(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 match is not found then hide
if(!row.cells[table.filterElements[i].index].innerHTML.toLowerCase().match(regEx))
{
row.style.display = "none";
}
/*
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();
}

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

// display form
function hideMatchingForm()
{
document.getElementById(customDiv).style.display ='none';
isDisplayed = false;
}

// create form on runtime and display
function displayMatchingForm()
{
activityType ="";
isDisplayed= true;
var width = 300;
var height = 50;
var left = (screen.width - width) /2;
var top = (screen.height - height)/3;
var top = 10;

//document.getElementById(customDiv).style.width = width + 'px';
//document.getElementById(customDiv).style.height = height + 'px';
document.getElementById(customDiv).style.left = left + 'px';
document.getElementById(customDiv).style.top = top + 'px';
var addContent =
"<form name='customForm' onSubmit='return setCustomValues();'>"+
"<table width='40%'>"+
"<tr>"+
"<td>"+
"<select name='activityType' style='width:100px' >"+
"<option selected value='contains'> Contains</option>"+
"<option value='equals'> Equals</option>"+
"<option value='startWith'> Start With</option>"+
"<option value='endWith'> End With</option>"+
"</select>"+
"</td>"+
"<td>"+
"<input type='text' size='20' name='keyword'>"+
"</td>"+
"</tr>"+
"<tr>"+
"<td>"+
"<input type='submit' style='width:100px' value='ok' >"+
"</td>"+
"<td>"+
"<input type='button' style='width:100px' value='cancel' onClick='clearCustomValues();'>"+
"</td>"+
"</tr>"+
"</table>"+
"</form>";

// add to your div an header
document.getElementById(customDiv).innerHTML = addContent;
//alert(document.getElementById(customDiv).innerHTML);
document.getElementById(customDiv).style.display ='';
}

// escape regex meta characters
function getRegexMetaString(input)
{
input = input.replace("\\","\\");
input = input.replace(".","\\.");
input = input.replace("|","\\|");
input = input.replace("(","\$");
input = input.replace(")","\$");
input = input.replace("{","\\{");
input = input.replace("}","\\}");
input = input.replace("[","\\[");
input = input.replace("]","\\]");
input = input.replace("*","\\*");
input = input.replace("+","\\+");
input = input.replace("?","\\?");
input = input.replace("^","\\^");
input = input.replace("$","\\$");

/*
input = input.replace("\\","\\\\");
input = input.replace(".","\\\\.");
input = input.replace("|","\\\\|");
input = input.replace("(","\\\$");
input = input.replace(")","\\\$");
input = input.replace("{","\\\\{");
input = input.replace("}","\\\\}");
input = input.replace("[","\\\\[");
input = input.replace("]","\\\\]");
input = input.replace("*","\\\\*");
input = input.replace("+","\\\\+");
input = input.replace("?","\\\\?");
input = input.replace("^","\\\\^");
input = input.replace("$","\\\\$");
*/
return input;
}

new feature

Dhruv P Patel6-May-08 21:05

Dhruv P Patel

6-May-08 21:05

hi buddy,

it is excellent & protable js for table filtering.

if u can provide custom filtering then it will be more help full and complete filtering.

like user can enter text and actions can be

contains,start with,end with

Re: new feature

WoutL6-May-08 21:20

WoutL

6-May-08 21:20

Of course you are free to extent the code for your needs.

Wout Louwers

Newbie Help

hgee5-Nov-07 8:54

hgee

5-Nov-07 8:54

WoutL,

Thanks for creating this very helpful tool.

Is it possible to freeze the first row (Heading) so it appears on top as you scroll down the page?

Thanks,

hgee

Re: Newbie Help

WoutL5-Nov-07 23:18

WoutL

5-Nov-07 23:18

Maybe you can use This[^] technique.

Wout Louwers

nice code, but could it do this... :)

andrewmeda6231-Aug-07 11:33

andrewmeda623

1-Aug-07 11:33

Hello.

Thanks a lot for posting this. I've put it together quickly and it works well. So big thanks.

I was wondering, to get it to work exactly like Excel auto filter, is it possible to have a feature to sort the rows into ascending / descending order?

Just out of interest, it works on a Mac in Firefox, but not Safari.

Thanks a lot

Andrew

andrewmeda623

Re: nice code, but could it do this... :)

WoutL1-Aug-07 20:12

WoutL

1-Aug-07 20:12

Hi Andrew,

There are a lot of samples for sorting a HTNL table. I am sure one of them can be combined with this code.

Wout Louwers

Still Working Great.

belesland19-Jul-07 2:34

belesland

19-Jul-07 2:34

Hello, I was searching something like this, this is very cool, simple and working great. Well , I am writing this only to "thanks to you" Smile | :)

Table size not changing?

arniedows16-May-07 20:46

arniedows

16-May-07 20:46

Hi, first of all great script, thanks a lot
my only problem is that the table does not change its size after filtering. Your demo table's height decreases when filter is used. How can I do that?
thanks again...

Re: Table size not changing?

WoutL16-May-07 21:56

WoutL

16-May-07 21:56