Re: [Proto-Scripty] [NEW] Optimize table content filtering.

2010-04-06 Thread Alex Wallace
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  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
> prototype-scriptacul...@googlegroups.com.
> To unsubscribe from this group, send email to
> prototype-scriptaculous+unsubscr...@googlegroups.com
> .
> 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 prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en.



[Proto-Scripty] [NEW] Optimize table content filtering.

2010-04-06 Thread Shinkan
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 prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en.