|
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 .
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.
|
|
|
|
|
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
|
|
|
|
|
You can use the function detachFilter() for this. Usage:
var table = document.getElementById("Your table ID");
table.detachFilter();
Wout Louwers
|
|
|
|
|
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 !
|
|
|
|
|
Can you post the code that you use on your website? Maybe I can help.
Wout Louwers
|
|
|
|
|
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.
|
|
|
|
|
You will have to modify the script to achieve that
Wout Louwers
|
|
|
|
|
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!
|
|
|
|
|
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
|
|
|
|
|
It should be similar to adding the text boxes. But I think you have to filter them on selectedValue.
Wout Louwers
|
|
|
|
|
<br />
<br />
var customDiv = "customDiv";<br />
var activityType = "";<br />
var keyword = "";<br />
var tempTable;<br />
<br />
var tenmpIndex;<br />
<br />
var tempFilterIndex;<br />
<br />
var isDisplayed= false;<br />
<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 />
function attachFilter(table, filterRow,cols)<br />
{<br />
table.filterRow = filterRow;<br />
table.filterCol = cols;<br />
var filterColumns = cols.split(",");<br />
<br />
if(table.rows.length > 0)<br />
{<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 />
showFilter = true;<br />
}<br />
else<br />
{<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 />
if(showFilter)<br />
{<br />
var opt = document.createElement("select");<br />
opt.onchange = filter;<br />
c.appendChild(opt);<br />
}<br />
}<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 />
table.fillFilters();<br />
table.filterEnabled = true;<br />
}<br />
}<br />
<br />
<br />
function detachFilter()<br />
{<br />
if(this.filterEnabled)<br />
{<br />
this.showAll();<br />
this.deleteRow(this.filterRow);<br />
this.filterEnabled = false;<br />
}<br />
}<br />
<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 />
function fillFilters()<br />
{<br />
if(this.filterCol == "all")<br />
{<br />
for(var col = 0; col < this.rows[this.filterRow].cells.length; col++)<br />
{<br />
if(!this.inFilter(col))<br />
{<br />
this.buildFilter(col, "(all)");<br />
}<br />
}<br />
}<br />
else<br />
{<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 />
if(!this.inFilter(col))<br />
{<br />
this.buildFilter(col, "(all)");<br />
}<br />
}<br />
}<br />
}<br />
<br />
function buildFilter(col, setValue)<br />
{<br />
var table;<br />
<br />
if(this.rows != undefined)<br />
{<br />
table = this;<br />
}<br />
else<br />
{<br />
table = tempTable;<br />
} <br />
<br />
var opt = table.rows[table.filterRow].cells[col].firstChild;<br />
<br />
while(opt.length > 0)<br />
opt.remove(0);<br />
<br />
var values = new Array();<br />
<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 />
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 />
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 />
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 />
if(trim(keyword) == "")<br />
{<br />
clearCustomValues()<br />
return false;<br />
}<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 />
if(tempIndex == -1)<br />
{<br />
var obj = new Object();<br />
obj.filter = keyword;<br />
obj.previous = keyword;<br />
obj.index = tempFilterIndex;<br />
obj.display = "(custom)";<br />
tempTable.filterElements.push(obj);<br />
}<br />
else<br />
{<br />
tempTable.filterElements[tempIndex].display = "(custom)";<br />
tempTable.filterElements[tempIndex].filter = keyword;<br />
tempTable.filterElements[tempIndex].previous = keyword;<br />
}<br />
showFilters(tempTable);<br />
resetValues();<br />
hideMatchingForm();<br />
return false;<br />
}<br />
<br />
function clearCustomValues()<br />
{<br />
hideMatchingForm();<br />
<br />
for(var i = 0; i < tempTable.filterElements.length; i++)<br />
{<br />
if(tempTable.filterElements[i].index == tempFilterIndex)<br />
{<br />
tempTable.filterElements[i].filter = tempTable.filterElements[i].previous;<br />
}<br />
}<br />
showFilters(tempTable);<br />
resetValues();<br />
}<br />
function resetValues()<br />
{<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 />
function filter()<br />
{<br />
if(isDisplayed)<br />
{<br />
hideMatchingForm();<br />
<br />
for(var i = 0; i < tempTable.filterElements.length; i++)<br />
{<br />
if(tempTable.filterElements[i].index == tempFilterIndex)<br />
{<br />
tempTable.filterElements[i].filter = tempTable.filterElements[i].previous;<br />
}<br />
}<br />
}<br />
<br />
var table = this;
while(table.tagName.toUpperCase() != "TABLE")<br />
table = table.parentNode;<br />
<br />
var filterIndex = this.parentNode.cellIndex;
var filterText = table.rows[table.filterRow].cells[filterIndex].firstChild.value;<br />
var display = filterText;<br />
var bFound = false;<br />
<br />
for(var i = 0; i < table.filterElements.length; i++)<br />
{<br />
if(table.filterElements[i].index == filterIndex)<br />
{<br />
bFound = true;<br />
if(filterText == "(all)")<br />
{<br />
table.filterElements.splice(i, 1);<br />
}<br />
else if(filterText == "(custom)")<br />
{<br />
tempTable = table;<br />
tempFilterIndex = filterIndex;<br />
tenmpIndex = i;<br />
displayMatchingForm();<br />
return;<br />
}<br />
else<br />
{<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 />
if(filterText == "(custom)")<br />
{<br />
tempTable = table;<br />
tempFilterIndex = filterIndex;<br />
tempIndex = -1;<br />
<br />
displayMatchingForm();<br />
return;<br />
}<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 />
showFilters(table);<br />
<br />
}<br />
<br />
function showFilters(table)<br />
{<br />
table.showAll();<br />
<br />
for(var i = 0; i < table.filterElements.length; i++)<br />
{<br />
table.buildFilter(table.filterElements[i].index, table.filterElements[i].display);<br />
<br />
var regEx = new RegExp(table.filterElements[i].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(!row.cells[table.filterElements[i].index].innerHTML.toLowerCase().match(regEx))<br />
{<br />
row.style.display = "none";<br />
}<br />
<br />
}<br />
}<br />
}<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 />
function hideMatchingForm()<br />
{<br />
document.getElementById(customDiv).style.display ='none';<br />
isDisplayed = false;<br />
}<br />
<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.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 />
document.getElementById(customDiv).innerHTML = addContent;<br />
document.getElementById(customDiv).style.display ='';<br />
}<br />
<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 />
return input;<br />
}<br />
<br />
|
|
|
|
|
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");
|
|
|
|
|
// 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;
}
|
|
|
|
|
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
|
|
|
|
|
Of course you are free to extent the code for your needs.
Wout Louwers
|
|
|
|
|
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
|
|
|
|
|
Maybe you can use This[^] technique.
Wout Louwers
|
|
|
|
|
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
|
|
|
|
|
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
|
|
|
|
|
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"
|
|
|
|
|
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...
|
|
|
|
|
Hi Arnie,
Without knowing your HTML and CSS code, I can only guess. But it has probably to do with a height property in your HTML or CSS code.
Wout
Wout Louwers
|
|
|
|
|
|
Filtering is done by comparing a cells innerHTML property. In IE you could changes this to innerText. But I don't know if this works in FireFox.
Wout Louwers
|
|
|
|
|
Hm.. I need it to be cross-browser, I`ll give you an example:
make | model | year | audi | a6 | 2003 | audi | a6 | 2005 | audi | a2 | 2002 |
In this case if I`d like to do filtering by model the script would filter by "a6" instead of filtering by "a6", can it be fixed?
|
|
|
|
|