Optimisation d'un filtre sur une table [Résolu]

[flyingfr53]

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.

[gwinyam]

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".

[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.

[galerien69]

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

[SpaceFrog]

http://javascript.developpez.com/faq...er#FiltreTable

[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.