In general I would simplify things a bit:
* the two selectors ($$) are pretty lengthy- could they be optimized,
perhaps the lines could be found by adding a class name to the tables and
then using getElementsByTagName("tr")? Also, try doing those selectors
beforehand and caching the values somewhere.
* Avoid using .each(function(j) { j.singleFunction(); }. Instead try using
Enumerable.invoke. [1]
* When going through the lines to hide those with hidden cells, there are a
lot of expensive functions being used: childElements() should be detected
before and cached along with the lines variable. detect() is an expensive
function in IE, especially if there are a lot of lines and cells. It seems
there would probably be a way to tighten that behavior up so you only need
to do one iteration of hiding and showing- maybe operate on the rows first
instead of cells first followed by the row filtering.
Best,
Alex
On Tue, Apr 6, 2010 at 10:44 AM, Shinkan <[email protected]> wrote:
> Hi everyone,
>
> I'm brand new to Prototype JS.
> I just made use of it to create a basic function which can filter
> table lines (show/hide) according to a column text search.
>
> My first impression is that IE is dozens times slower than FF for this
> thing.
> As I'm new to Prototype, and that my code doesn't seem beautiful at
> all (pretty basic thinking), I wonder if there would be a way to
> "prototipize" it more, so that is would be more efficient and less
> ugly.
> Thanks for any advice that will make me learn Prototype and make my
> code faster.
>
> Here is the excerpt :
>
> field_filter = function(nam, val) {
> var lines = $$("#annuaire_table > div > table > tbody > tr");
> // Gather cells that have our target column name as class :
> they are cells of our current filtering column.
> // IS THERE ANY WAY TO GET THAT FROM "lines" DIRECTLY ?
> instead of traversing DOM once again ?
> var ourcells = $$("#annuaire_table > div > table > tbody > tr
> > ."+nam)
> // Removing previous search results : search results are made
> of class changes.
> ourcells.each( function(i) {
> i.removeClassName("highlight");
> i.removeClassName("hide");
> } );
> // If our filter value is not empty...
> if( val.length > 0 )
> {
> // We partition our column's cells in 2 parts.
> var rtab = ourcells.partition( function(i) {
> i.cleanWhitespace();
> // Those which have a text content matching our search.
> if( i.empty() != true )
> {
> return ((i.textContent || i.innerText ||
> "").toLowerCase().indexOf(val.toLowerCase()) >= 0);
> }
> // Those which don't.
> return false;
> } );
> var containstext = rtab[0];
> var notcontainstext = rtab[1];
> // We add "highlight" class to cells we care about (matching
> search cells).
> containstext.each( function(j)
> { j.addClassName("highlight"); } );
> // We add "hide" class to others.
> notcontainstext.each( function(j)
> { j.addClassName("hide"); } );
> }
> // We hide every table line which has a cell with "hide"
> class.
> lines.each( function(i) {
> var childcells = i.childElements();
> if( childcells.detect( function(j) { return
> j.hasClassName("hide"); } ) )
> {
> i.hide();
> }
> else
> {
> i.show();
> }
> } );
> // THEN, IS THERE ANY WAY TO FIND TABLES WHERE ALL LINES ARE
> HIDDEN ?
> };
>
> Many thanks in advance.
>
> --
> You received this message because you are subscribed to the Google Groups
> "Prototype & script.aculo.us" group.
> To post to this group, send email to
> [email protected].
> To unsubscribe from this group, send email to
> [email protected]<prototype-scriptaculous%[email protected]>
> .
> For more options, visit this group at
> http://groups.google.com/group/prototype-scriptaculous?hl=en.
>
>
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
