Solved

Filtering a table row with javascript

Posted on 2009-04-09
6
1,095 Views
Last Modified: 2012-05-06
I am trying to filter information read from a database. I am using JSTL to iterate through a bean and display all the results. I then want to be able to filter those results with an input box, letter by letter. I have this working but it is really slow when I have a large result set (800 rows). I realize it is slow because it is reading every row and then the <td> with the id=desc. I also alternate the row color class.

Please let me know if you can help speed this up.

I pasted my javascript code below and attached a txt file.
function filter (phrase, _id){
	var words = phrase.value.toLowerCase().split(" ");
	var table = document.getElementById(_id);
	var ele;
	for (var r = 1; r < table.rows.length; r++){;
		ele = $('desc'+r).innerHTML;
	        var displayStyle = 'none';
	        for (var i = 0; i < words.length; i++) {
		    if (ele.toLowerCase().indexOf(words[i])>=0)
			displayStyle = '';
		    else {
			displayStyle = 'invisibleRow';
			break;
		    }
	        }
		table.rows[r].className = displayStyle;
	}
	alternate(_id);
}
 
function alternate(id) {
	var i,j,tab,rows,row,tr;
	rows = document.getElementById(id).rows;	
	row=0;
	for(i=0,tr; tr=rows[i]; i++) {
		if (rows[i].className != 'invisibleRow') {
			row++;
			tr.className = (row % 2 == 0) ? "even" : "odd";
		}
	}
}

Open in new window

table-filter.txt
0
Comment
Question by:stinklefink
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 20

Assisted Solution

by:ChristoferDutz
ChristoferDutz earned 100 total points
ID: 24107206
Well I think if you are working with a table you will not be able to speed this up very much.
In general there are two problems:
1. Parsing the HTML for the large table simply takes its time and even more memory
2. The browser starts "drawing" a table as soon as it reads the closing table-tag.

I'd recomend a combination of these:
1. doing the filtering on the server side
2. Loading the table raw by using something like a Dojo Datagrid
3. Using Divs instead of Table, TR and TD or TH

First thing simply reduces the amount of code the browser has to process.
Second reduces the memory and network load. As it's Tables are based on Divs, this makes the third tip obsolete.
The last tip (the one with the divs) simply lets the browser start drawing as soon as it reads the first cell. Divs can be dynamically layouted and the user will not recognize, that the table is still loading after the screen is full of table ;-)

Id' suggest a combination of 1. and 2. ... that's what I always use.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24107263
How static is your table?
If it is changing all the time, the following may not help.

Instead of using document.getElementById() to locate the different table rows,
I would consider building a dictionary indexed by the table rowId, and have the associated value be a reference to the specific table row in question.

Are you building the table dynamically?
If so, you should be able to build this dictionary very easily.

Does this make sense?
0
 
LVL 18

Accepted Solution

by:
Morcalavin earned 150 total points
ID: 24107314
As for optimization, I see three major things you can do:
  1. Follow ChristoferDutz suggestions.  However, this won't give you that "dynamic" affect you are looking for, since you would have to type in your filter, submit it to the server, have the server return the new data based on the filter you provided, unless you implement it via AJAX
  2. You are re-evaluating your length in your loops.  Instead of:
    for(var i = 0; i < array.length; i++)
    do
    for(var i = 0, e = array.length; i < e; i++)
    This doesn't provide a lot of optimization, but every little bit helps.
  3. I see no need for 2 separate loops, both of these could be combined into one.  Every time you change the CSS value, the browser has to "repaint" or "reflow" the entire document.  Doing this 1600 times is slow.  800 times is slow as well, but not as slow as 1600 times.
0
Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

 
LVL 20

Expert Comment

by:ChristoferDutz
ID: 24107382
Well the Dojo Grid does exactly this using AJAX.

In one of my last projects I had to tune an existing application that displayed HTML tables with 400-700 rows. When hitting "Save As..." and looking at the size of this HTML sizes of 15-30MB were quite common. When having a look at the IE memory consumption (I know this is no good reference) it jumped up about 50-75MB just for displaying the data. No matter if it was hidden or displayed.

No matter which approach I had, As long as the data is sent along with the page, you will be having problems. You could reduce this load (If you want to avoid AJAX stuff) and use a Dojo DataGrid and let it use a local datasource and initialize this datasource as an Array of JavaScript Arrays. This way memory and network load should be greatly reduced and the JavaScript Parser is a lot faster than the Html Rederer ;-)

My suggestion is to separate the View (HTML Page) and the Data (Table content). There are quite a lot of DataGrids available. I can only recomend the Dojo DataGrid.
0
 

Author Comment

by:stinklefink
ID: 24107910
Morcalavin,

Could you please attach the changes to the javascript? I change the loop but receive an error. I would like to remove one loop and see if any faster.
0
 

Author Closing Comment

by:stinklefink
ID: 31568515
Is there a way to directly respond back to a comment/expert?
0

Featured Post

Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this post we will learn how to make Android Gesture Tutorial and give different functionality whenever a user Touch or Scroll android screen.
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question