Highest posts
Latest posts
I’m so happy with myself, I want to share some nice and easy code that can search and filter in a table.
Simple, nothing to add in your html but for the javascript file and a simple filterable class to set onto tables and to define with a color (or any other style you want).
<style>
.highlighted { background: yellow; }
</style>
<script type="text/javascript"
src="attachment/file/filterTable/filterTable.js"></script>
<table class="filterable">
<thead>
<tr>
<th></th>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data again</td>
<td>Data yet other</td>
<td>Data still</td>
</tr>
</tbody>
</table>
| Country | Current US$ | 1990 US$ |
|---|---|---|
| United States | $18.5billion | $5.4bn |
| Russia | $4.6billion | $6.2bn |
| France | $4.4bn | $2.1bn |
| UK | $1.9bn | $985million |
| Germany | $900m | $1.1bn |
| Canada | $900m | $543m |
| China | $700m | $125m |
| Israel | $500m | $283m |
See also here for some of the original code.
Here is the javascript file:
+3
New discussion
Answer
+1
New discussion
Answer
+1
Hey Echarp,
this is a really cool tool.
But I have a problem to transfer it to a different page. Even if I save your page to my desktop with the .js-file (path is adjusted) it doesnt work.
The example from “vonloesch” works, but I want the highlighting thing.
Can somebody be so kind a post or send me the naked .html-file and the .js-file? You would really do me a favor!
Thanks in advance and kind regards!
Johannes
+2
New discussion
Answer
I’ll gladly send it to you, to what email address?
Normally just clicking on the following link should open the javascript file for you: http://blog.echarp.org/attachment/file/filterTable/filterTable.js
Then save it locally and move this file into whatever directory you use for your javascript files.
Once this is done, you can test the feature with the html code present in this article: it include the js file in the html file, and uses it through the addition of class “filterable” to the html table itself. The highlight is managed through a bit of css.
You can also contact me on irc, server irc.freenode.net, I’m generally on #parlement.
+1 Thanks for your feedback on this!
+1
New discussion
Answer
+0
I have no idea how old this is or if it is even still worked on, but i had to make some small modifications to get it working in Chrome/Firefox, so i will just add them here incase anyone else needs them.
JavaScript Change:
CHANGE
function filterTable(term, table) {
dehighlight(table);
TO
function filterTable(term, table) {
var term = document.getElementById(term);
var table = document.getElementById(table);
dehighlight(table);
HTML Change
CHANGE
filterTable(this.value, ‘filterTable’);
TO
filterTable(‘searchClient’, ‘filterTable’);
In the function, “searchCLient” is the ID only of the textbox, “filterTable” is the ID only of the table. The 2 lines i added in the JavaScript file turn the ID into an object.
+1
New discussion
Answer
I’m not using it currently, but your changes are appreciated, and could be useful to others.
Thanks!
+1
New discussion
Answer
+1
Hello, what an amazing script!
I just wondering if the table can be “hidden”, UNTIL someone enters text into the
There is, it would be javascript triggering the display on filter value modification.
Something like
element.style.display = 'none';
input.onkeyup = function() {
filterTable(input, element);
element.style.display = 'block';
}
The “display” property lets you hide or show the table element. “onkeyup” is one mechanism to manage key strokes, and display the table.
Good luck!
+1
New discussion
Answer
+1
New discussion
Answer
Modify as below:
in filter
ele = table.rows®.innerHTML.replace(/<[^>]>/g,"");
to
ele = table.rows®.innerHTML.replace(/<[^>]>/g,"").replace(/\&/g,‘&’);
AND
in dehighlight
node.parentNode.innerHTML.replace(/<[^>]>/g, "")), to node.parentNode.innerHTML.replace(/<[^>]>/g, "").replace(/\&/g,‘&’)),
+1
New discussion
Answer
-1
-1
-1
-1
-1
How would I make this so it only looks in a specific column? in the example you give above, say I only wanted to search the 1990 US column and not the other two… How would I do that?
Thanks for the code! This has been such a big help so far!! Levi
+1
New discussion
Answer
+0
Hello hello
I’m happy if this code is useful!
Depending on the tools and libraries you are using, you should be able to modify the table.rows[r] parts, and there to add some column management and thus limit what columns can be highlighted.
Using jquery (or such), you could modify the script even more, and depend on some html class being present or absent on columns, to ignore or concentrate on those specific columns you’re interested in…
+1
New discussion
Answer
That’s what I figured and I’ve been trying very hard to make it work. I am using jquery and the site is dev.mtronpti.com/category.php
As you can see, I’m calling the customFilter function for each set of fancy jquery radios.
The four radio sets simply add a slash after the search term and then I’m splitting by the slash.
The issue I’m having though is that the slider at the bottom can only search the Frequency Range column, and the others can technically search all of the columns and get the job done.
Do you have any suggestions for me? Any guidance would be helpful, I’m really stuck.
Many many many thanks,
Levi
+1
New discussion
Answer
function customFilter(sTerm, _rowOrCol, _selector) {
if (_rowOrCol == 'row') {
/* this would be a row */
sTerm = sTerm.toLowerCase().split("/");
element = $(_selector);
var field;
element.find('tr:gt(0)').each(function(){
field = this.innerHTML.toLowerCase().replace(/<[^>]+>/g,'');
displayStyle = '';
for (var i = 0; i < sTerm.length; i++) {
if (field.indexOf(sTerm[i])>=0) {
displayStyle = '';
} else {
displayStyle = 'none';
break;
}
}
$(this).css('display',displayStyle).addClass('hmmm');
});
} else {
/* this would be a column */
sp = sTerm;
field = $(_selector);
field.each(function(index){
ele = this.innerHTML.toLowerCase().replace(/<[^>]+>/g,'').replace(/[\s]*[mhz]*/g,'');
x = false;
y = false;
if (ele != ''){
eleA = ele.split('-');
lfe = parseFloat(eleA[0]);
ufe = parseFloat(eleA[1]);
sp = parseInt(sp);
lfe <= sp && sp <= ufe? x=true : x=false;
lfe <= sp && sp <= ufe? y=true : y=false;
}
if(x==true || y==true){
$(this).parent().removeClass('outOfFreqRange');
} else {
$(this).parent().addClass('outOfFreqRange');
}
});
}
}
Hi, there is a little improvement for your script.
Use:
element.attributes[‘class’].value.indexOf(‘filterable’) != -1
insted of:
element.attributes[‘class’].value == ‘filterable’
reason:
Table could have more classes like table class=“blabla filterable”
+1
New discussion
Answer
Hi,
For filtering the table the above java script is working fine ..
But if i want to show the filtered text first and the remaining text as next is it possible in JS
as example if type canada
then the first rows should contain the word canada
and the remaining words should follow the next rows
i dont want to delete the rows, i just want to shuffle the rows
by the key word…
Please help me ..
+1
New discussion
Answer
Hi Echarp
i like the filtertable js and have used it in one of my apps, but find it to slow when filtering a large table, is it possible to change to a ‘click serach button or hit enter’ so it doesnt filter live
simpleinvoices.sf.net/demo
Cheers
Justin Kelly
justin@kelly.org.au
+1
New discussion
Answer
It’s a pleasure to create something that can be useful!!!
To improve it on a large table, yes, you would need to move the filtering code toward a “submit” button.
Just modify the javascript, something like:
var form = document.createElement(‘form’); form.setAttribute(‘class’, ‘filter’); __ For ie… form.attributes[‘class’].value = ‘filter’; var input = document.createElement(‘input’); form.appendChild(input); var input2 = document.createElement(‘input’); input2.setAttribute(‘type’, ‘submit’); input2.attributes[‘type’] = ‘submit’; input2.onkeyup = function() { filterTable(input, element); } form.appendChild(input2); element.parentNode.insertBefore(form, element);Have fun.
+1
New discussion
Answer
Hi Echarp
Awesome script!
I’m wondering if there’s a way to have the search results appear in a new window after the “Submit” button has been clicked?
I’m still very new to javascript. I’ve been playing around with the window.open() method, but I haven’t been able to work it into the filtering script…it’s driving me crazy! Am I missing something simple??
Any help would be appreciated. Thank you so much!
Pat
+1
New discussion
Answer
Hi
You could add some behaviours in filterTable method. But right now this method is called at every keystroke, so opening a window to display the result will be… cumbersome.
Instead, add a html button or something alike, I don’t know <input type="button" id="showResult" value="Show result" />, then in javascript bind it to a method that will display the results in whatever way you want: $('#showResult').click(function() { alert($('.highlighted').text()); });…
This is totally untested. But it should work, more or less.
+1
New discussion
Answer
+0
-1
-1
-1
Hi Echarp,
I just started using this code but i found a small problem. Apparently I can’t have 2 filterable tables on the same page each one with it’s own textfield. If I create 2 I get the first table that is doing nothing, and only the last one works.
I’ve tried doing a bit of debuging and it seams that the first textfield (for the first table) is attempting to search in the last table, even if visually it does nothing.
I’m pretty noob when it comes to js, can you give me a hand please?
+1
New discussion
Answer
Yes.
I’m testing it right now, and it only applies to the latest table. This is due to event management and knowing onto which input element the event is associated.
Are you following this thread? If yes, you could try simply using the javascript event, assigning a new attribute to the input, something like “tableNumber”, which you can use in the “filterTable” function in order to apply on the correct table. I’ll try something this afternoon, and paste here the resulting js…
+1
New discussion
Answer
Hi Echarp. Thanks for the answer but after a bit of experimenting I found out that i needed to specify somehow the table to which the textfield applies. Also, I had to do it so that it passes the ID to the filterTable() function. Basically I’m assigning an ID to the table (if it’s not already defined, othewise I’m using that one). Also, since a table might already have a class of it’s own I’ve modified the code so that is looks for the “filterable” substring. I was already using “sortable resizable” as a class value. Last thing, the Array#contains method that I’m using is an extension for the Prototype lib.
Here’s the refactored code. I put all of it in a function:
function initFilterableTables() { tables = document.getElementsByTagName(‘table’);
for (var t = 0; t < tables.length; t++) { element = tables[t]; if (!element.attributes[‘id’]) { element.setAttribute(“id”, “auto-table-id-” + t) } if (element.attributes[‘class’] && element.attributes[‘class’].value.split(" ").contains(‘filterable’)) { var form = document.createElement(‘form’); form.setAttribute(‘class’, ‘filter’); form.setAttribute(‘id’, ‘filter’); var input = document.createElement(‘input’); input.setAttribute(‘type’, ‘text’); input.style.height = “2em”; input.setAttribute(‘class’, ‘searchtextbox’); input.setAttribute(‘id’, ‘searchtextbox’ + t); input.setAttribute(‘onkeyup’, ‘filterTable("’ + input.attributes[‘id’].value + ‘“,”’ + element.attributes[‘id’].value + ‘“)’) form.appendChild(input); element.parentNode.insertBefore(form, element); } }}
+1
New discussion
Answer
+1
-1
-1
-1
Hi Echarp
i like the filtertable js and have used it in one of my apps, but find it to slow when filtering a large table, is it possible to change to a click serach button or hit enter so it doesnt filter live
simpleinvoices.sf.net/demo
Cheers
Justin Kelly
justin@kelly.org.au
+1
New discussion
Answer
-1
+2
New discussion
Answer
You could try removing some of the features.
For example the script is checking and highlighting individual words, can be removed easily (see the “dehighlight” and highlight" methods).
Already this should give you more reactivity over a large table.
+1
+0
New discussion
Answer
-1