Parlement

people forge GPL fr

Identity

Filter

Visitors

test (1) echarp (1) billsmith (1) behaviour.js (1) hello (0) meth (1) speed (0) mjm (1) nick (1) JavaScript simple examples (2) table try (0) behaviour (0) Matthew (0) Bruce (0) sdda. (0) Fran saa (0) sdad (7) Mag (0) java (0) livr (0) joe (0) dddd (0) sas (0) franz (0) dfgdfgdfg (0) javascxrpt (1) dsd (4) venuse (0) russia (0) asf (4) April (0) mag (0) eggy (0) anon (1) Franz Kruft (0) Mirek (0) chichcquebab (0)

Subscribers

echarp matthew (1)

Highest posts

Latest posts

ACTA alert!

Search

echarp's blog

18/06/06 12:13

JavaScript filter/search in table

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:

New discussion Write

Answer

09/06/10 19:37 <behaviour.js> +1 -1
09/06/10 19:37 <behaviour.js> -1 -1
09/06/10 19:37 <behaviour.js> +1 -1
25/02/10 21:22 <Johannes>
JavaScript filter search in table

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
- 26/02/10 10:02 <echarp>
  
  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
21/07/06 15:15
Re: JavaScript filtersearch in table

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
- 06/11/07 10:46 <echarp> +1 -1
22/11/08 19:42 <Matthew>
Speeding it up?

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. +2 New discussion Answer
- 28/11/08 17:40 <echarp>
  
  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
  - 12/11/09 13:57 <JavaScript simple examples> -1 -1
07/08/09 15:25 <Sam>
Multiple table filter

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. +1 New discussion Answer
- 10/08/09 14:46 <echarp>
  
  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.
  +1 New discussion Answer
  - 10/08/09 19:52 <Sam>
    
    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; } }
    
    +1 New discussion Answer
    - 16/08/09 23:09 <echarp>
      
      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.
      +1 New discussion Answer
    - 10/08/09 20:08 <Sam>
      
      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)
      +1 New discussion Answer
13/11/08 08:47 <Nick>
Re: JavaScript filtersearch in table

This is an awesome script, nice and lightweight an does the job perfectly, thanks :) +2 New discussion Answer
- 17/11/08 10:32 <echarp> +1 -1
- 17/11/08 10:32 <echarp> Thank you very much! +1
21/07/06 15:15
Re: JavaScript filtersearch in table

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
- 21/07/06 15:37 <echarp>
  
  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
  - 01/12/07 11:02 <Franz Kruft> Hello Echarp
    I am looking for a table sort script to find names and numbers in a table of about 100 rows. Your tablefilter script seems to be very good for this job, so I tested your fiterTable.js script with the browsers: Firefox 2.x; IE 7; Opera 9 and Netscape 7.×. It runs in all browsers without Netscape(The form field das’nt appear). In your homepage http://leparlement.org/filterTable it’s ok, also in Netscape. What did I wrong?
    Best Regards
    Franz Kruft +0
    5 messages...
    
    << Close
- 06/11/07 10:46 <echarp> +1 -1
01/02/07 03:49 <anon> +1 +0
- 06/11/07 10:48 <echarp> -1 -1
- 13/02/07 12:42 <fileter> +1 -1
12/04/07 22:43 <anon> -1 -1
- 06/11/07 10:48 <echarp> -1 -1
- 07/08/07 10:15
  hjsdjf
  
  jefkghdghdg -1 New discussion Answer
  - 07/08/07 11:18 <echarp> -1 -1
05/04/07 09:39 <anon> +1 -1
- 06/11/07 10:48 <echarp> -1 -1
- 12/04/07 22:40 <anon> +1 +0
  - 07/06/07 15:35 <anon> -1 +0
    - 07/08/07 10:07
      hjafasjfav
      
      sfgsfsd -1 New discussion Answer
      - 07/08/07 11:18 <echarp> -1 -1
    - 20/07/07 22:55 <anon> 0 +0
      - 07/08/07 10:07
        jfskgjsjk
        
        ikdsgkldsb d k gklmd sh sl fdhgbgd -1 New discussion Answer
        
        07/08/07 11:18 <echarp> -1 -1
21/07/06 15:15
Re: JavaScript filtersearch in table

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
- 06/11/07 10:47 <echarp> +1 -1
28/06/06 04:00 <anon> +1 -1
- 06/11/07 10:47 <echarp> -1 -1
- 18/12/06 12:01 <anon> -1 +0
18/09/06 14:17 <echarp> +1 -1

v0.17

Parlement

Identity

Filter

Visitors

Subscribers

Highest posts

Latest posts

Links

Blogs

Democracy

ACTA alert!

Search

echarp's blog

JavaScript filter/search in table

JavaScript filter search in table

Re: JavaScript filtersearch in table

Speeding it up?

Multiple table filter

Re: JavaScript filtersearch in table

Re: JavaScript filtersearch in table

hjsdjf

hjafasjfav

jfskgjsjk

Re: JavaScript filtersearch in table