Optimisation d'un filtre sur une table

Version imprimable

Bonjour,

j'ai une grille editable (environ 150 lignes et 30 colonnes) sur laquelle je peux effectuer des filtres à partir de champs input.

par exemple
Code:

1 2 <input type="text" class="inputbleu"size="3" name="statut" onkeyup=javascript:filtre(this.value,22)
et une fonction filtre jquery
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function filtre(valeur,colonne) { for (i=0;i<nb_lots;i++) { if (!$("#matable tbody>tr:eq("+i+")>td:eq("+colonne+")").text().toLowerCase().match(valeur.toLowerCase())) {$("#matable tbody>tr:eq("+i+")").hide();} else {$("#matable tbody>tr:eq("+i+")").show();} } }//fin de filtre
mon problème est que ce fitre n'est pas très reactif notamment sur des pc pas trop puissants et c'est encore plus criant lorsque j'y ajoute des calculs de sommes sur les colonnes.

j'ai fait la même chose avec dhtmlxgrid qui reagit bcp plus rapidement mais qui par ailleurs ne satisfait pas à tous mes besoins (en version gratuite).

y a t-il moyen d'optimiser ce code pour raccourcir le délai d'execution.

merci de vos idées.

En utilisant le cache, tu devrais gagner un peu :

Code:

1
2
3
4
5
6
7
8
9
10
11
function filtre(valeur,colonne)
{  
        for (i=0;i<nb_lots;i++)
          {
var taLigne = $("#matable tbody>tr:eq("+i+")");
          if (!taLigne.children("td:eq("+colonne+")").text().toLowerCase().match(valeur.toLowerCase())) 
                {taLigne.hide();}
           else {taLigne.show();}
          }
 
}

A tester et à confirmer mais bon de façon générale, tant que tu parcourras tout le tableau, tu seras toujours "lent".

26/07/2011, 23h19
gwinyam

En fait, l'idéal serait quand même qu'au moins tes TR ait toutes un ID. Comme ça tu les chopes toutes avec le sélecteur de base :
$("#taLigneI")

Traitement extrêmement rapide et surtout beaucoup plus rapide que de faire tout un tas de recherche dans le DOM comme tu le fais là. La raison de l'efficacité du sélecteur par ID vient directement du fait que la méthode getElementByID est native à tous les navigateurs qui maintient donc un index de ces ID. Alors qu'en traversant le DOM, tu le forces à parcourir divers tableaux.

Et rien ne t'interdis de rajouter un ID à chaque ligne avec JS. Ou si tu le peux côté serveur.

Bonjour,
ca implique également d'avoir un id sur la colonne.
On peut cacher les noeuds html dans un tableau js.
et opérer sur le tableau js directos :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
//id, array d'indice
function cacheNodes(tableId, columns){
 var cells=[];
 var trs = $('#'+tableId+' tbody>tr');
 trs.each(function(i){
  cells[i]={};
  var tr = $(this);
  columns.forEach(function(y,j){
   cells[i][j] = tr.find('td')[y];
  });
 });
 return cells;//chaque ligne contient les tds aux indices désirés
}

et derrière, on accede directors dans cells

Code:

1
2
3
4
5
6
7
8
9
  function filtre(valeur,colonne)
{  
        for (i=0;i<nb_lots;i++)
          {
          if(cells[i][colonne].toLowerCase().match(valeur.toLowerCase())) {
             cells[i][colonne].toggle():
          } 
 
}//fin de filtre

27/07/2011, 09h35
SpaceFrog

http://javascript.developpez.com/faq...er#FiltreTable
27/07/2011, 20h47
flyingfr53

merci de vos reponses je vais tester.

En fait j'avais supprimé les id sur les <tr> pour optimiser l'affichage du tableau initial mais je vais essayer de les remettre, je pense qu'effectivement ça doit ameliorer.