JavaScript filter/search in table

Re: JavaScript filter search in table

echarp — 2010-02-26 10:02:00+0100

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!

JavaScript filter search in table

Johannes — 2010-02-25 21:22:43+0100

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

Re: Speeding it up?

JavaScript simple examples — 2009-11-12 13:57:51+0100

-1

Re: Multiple table filter

echarp — 2009-08-16 23:09:35+0200

I’m not sure about your goal, you want “one” filter to filter over many tables? Input filter should be present above the first one then?

First you can “only” add the filter form if you are in the first table:

<pre>


if (t == 0 && element.attributes[‘class’] && …) {
  …
}

(at the end of the javascript file)

Then in the filterTable(input, element); part, reloop over all tables to add each to the onkeyup event.

Something like:

<pre>


for (var t2 = 0; t2 < tables.length; t2++) {
element2 = tables[t];
filterTable(input, element2);
}

It’s just one way to do it, simple. You tell me if it’s good.

Re: Multiple table filter

Sam — 2009-08-10 20:08:54+0200

Sorry it tried to compile the form at the end of the script,

I had tried to use the same basic version of your form with the form calling the function filter(this,‘Id1’,‘Id2’,‘Id3’,1)

Re: Multiple table filter

Sam — 2009-08-10 19:52:00+0200

So would that in effect get the filter function to repeat the process over a number of table references? Would ‘toFilter’ have to be classified as a collection of table Id’s? Sorry I’m very much a beginner when it comes to this, trying to learn though.

Do you think something along the lines below would work, please be as critical as you can. Thankyou so much for your help.

function filter (phrase, id1,id2,id3){ var words = phrase.value.toLowerCase().split(" "); var table = document.getElementById(id1); var ele; for (var r = 1; r < table.rows.length; r++){ ele = table.rows®.innerHTML.replace(/<[^>]>/g,""); var displayStyle = ‘none’; for (var i = 0; i < words.length; i+) { if (ele.toLowerCase().indexOf(words[i])>=0) displayStyle = ’’;

var words = phrase.value.toLowerCase().split(" ");

var table = document.getElementById(_id2); var ele; for (var r = 1; r < table.rows.length; r++){ ele = table.rows®.innerHTML.replace(/<[^>]>/g,""); var displayStyle = ‘none’; for (var i = 0; i < words.length; i+) { if (ele.toLowerCase().indexOf(words[i])>=0) displayStyle = ’’;

var words = phrase.value.toLowerCase().split(" ");

var table = document.getElementById(_id3); var ele; for (var r = 1; r < table.rows.length; r++){ ele = table.rows®.innerHTML.replace(/<[^>]>/g,""); var displayStyle = ‘none’; for (var i = 0; i < words.length; i+) { if (ele.toLowerCase().indexOf(words[i])>=0) displayStyle = ’’;

else { displayStyle = ‘none’; break; } } table.rows®.style.display = displayStyle; } }

Re: Multiple table filter

echarp — 2009-08-10 14:46:29+0200

It’s definitely something you can do, yes

This implies some modifications to the javascript, so that instead of filtering one table, it would filter all tables which are contained in a specific part of the page.

For example: document.getElementById('toFilter');

And wherever there is a loop over the table’s rows, you should add an extra loop around it, to loop over all sub tables.

I’ll gladly help you if you want to try it.

Multiple table filter

Sam — 2009-08-07 15:25:25+0200

This is a great little script! Is there a way of getting the search function to filter more than one table simultaneously by playing with the table id’s? I have tried but unfortunately failed to get it to work.

Re: Speeding it up?

echarp — 2008-11-28 17:40:50+0100

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.

Speeding it up?

Matthew — 2008-11-22 19:42:01+0100

I like this script, but am trying to use it on a large table (4 columns and about 165 rows), so it is slow. Do you have any suggestions for how to speed it up? When I add a submit button it does help, but still takes about 10-15 seconds to return the search results.