by Heathesh
6. May 2010 20:31
While using SQL Developer (client application I use to connect to and run queries against Oracle), I exported a table to HTML and found some very interesting JavaScript code. The code allowed a user to search or filter the HTML data returned. I thought this might be useful, so I decided to blog on how they did it.
First create a table with data like so:
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th>ID</th>
<th>First Name</th>
<th>Surname</th>
<th>Website</th>
</tr>
<tbody id="data">
<tr>
<td>1</td>
<td>Heathesh</td>
<td>Bhandari</td>
<td><a href="http://heathesh.com">http://heathesh.com</a></td>
</tr>
<tr>
<td>2</td>
<td>Candice</td>
<td>David</td>
<td><a href="http://candicedavid.com">http://candicedavid.com</a></td>
</tr>
</tbody>
</table>
As you can see the tbody tag has an id "data", this is because you do not want to search the title fields, only the data within the tbody tag. Once you've defined the table with the relevant data, you need to create an initialize method to initialize the object to use to perform the search:
//define the table search object, which can implement both functions and properties
window.tableSearch = {};
//initialize the search, setup the current object
tableSearch.init = function() {
//define the properties I want on the tableSearch object
this.Rows = document.getElementById('data').getElementsByTagName('TR');
this.RowsLength = tableSearch.Rows.length;
this.RowsText = [];
//loop through the table and add the data to the table search object
for (var i = 0; i < tableSearch.RowsLength; i++) {
this.RowsText[i] = (tableSearch.Rows[i].innerText) ? tableSearch.Rows[i].innerText.toUpperCase() : tableSearch.Rows[i].textContent.toUpperCase();
}
}
The comments should explain what the method is doing. After creating the initialize method, add it to the body onload event to initialize when the page is loaded:
<body onload="tableSearch.init();">
Next create the actual JavaScript function to run the search like so:
//onlys shows the relevant rows as determined by the search string
tableSearch.runSearch = function() {
//get the search term
this.Term = document.getElementById('textBoxSearch').value.toUpperCase();
//loop through the rows and hide rows that do not match the search query
for (var i = 0, row; row = this.Rows[i], rowText = this.RowsText[i]; i++) {
row.style.display = ((rowText.indexOf(this.Term) != -1) || this.Term === '') ? '' : 'none';
}
}
Once that's done add a function to handle the user pressing the return or enter key:
//handles the enter key being pressed
tableSearch.search = function(e) {
//checks if the user pressed the enter key, and if they did then run the search
var keycode;
if (window.event) { keycode = window.event.keyCode; }
else if (e) { keycode = e.which; }
else { return false; }
if (keycode == 13) {
tableSearch.runSearch();
}
else { return false; }
}
Lastly, add a table that contains a search text box and search button above the table with the relevant data in it:
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<input type="text" size="30" maxlength="1000" value="" id="textBoxSearch" onkeyup="tableSearch.search(event);" />
<input type="button" value="Search" onclick="tableSearch.runSearch();" />
</td>
</tr>
</tbody>
</table>
I've saved the sample html page I created here: http://heathesh.com/code/javascript/tablesearch/. If you right click and view the page source, you will see the implementation first hand.
Happy Scripting!
Subscribe