Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Filtering a table row with javascript

Posted on 2009-04-09
6
Medium Priority
?
1,101 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 300 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 450 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
Understanding Linux Permissions

Linux for beginners: How to view the permissions associated with files and directories and also how you can change them.

 
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

Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
This theoretical tutorial explains exceptions, reasons for exceptions, different categories of exception and exception hierarchy.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Suggested Courses

721 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