Solved

Filtering a table row with javascript

Posted on 2009-04-09
6
1,084 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
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Basic understanding on "OO- Object Orientation" is needed for designing a logical solution to solve a problem. Basic OOAD is a prerequisite for a coder to ensure that they follow the basic design of OO. This would help developers to understand the b…
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

776 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