IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Optimisation d'un filtre sur une table


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    45
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2010
    Messages : 45
    Par défaut Optimisation d'un filtre sur une table
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <input type="text" class="inputbleu"size="3" name="statut" onkeyup=javascript:filtre(this.value,22)

    et une fonction filtre jquery



    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  2. #2
    Membre émérite
    Avatar de gwinyam
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2006
    Messages
    1 162
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Mai 2006
    Messages : 1 162
    Par défaut
    En utilisant le cache, tu devrais gagner un peu :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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".

  3. #3
    Membre émérite
    Avatar de gwinyam
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2006
    Messages
    1 162
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Mai 2006
    Messages : 1 162
    Par défaut
    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.

  4. #4
    Invité
    Invité(e)
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  6. #6
    Membre averti
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    45
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2010
    Messages : 45
    Par défaut
    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.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Problème de filtre sur une table
    Par bilal_ini dans le forum Bases de données
    Réponses: 9
    Dernier message: 18/07/2019, 07h35
  2. Erreur de filtre sur une table Firebird
    Par defluc dans le forum Bases de données
    Réponses: 8
    Dernier message: 05/06/2010, 11h22
  3. [WD14] filtre sur une table
    Par WindeveloP dans le forum WinDev
    Réponses: 3
    Dernier message: 21/02/2010, 16h14
  4. Probléme de Filtre sur une Table
    Par souminet dans le forum Débuter
    Réponses: 1
    Dernier message: 28/04/2008, 11h34
  5. [SQL Server] Filtré sur une table avant une jointure externe
    Par TangoZoulou dans le forum Langage SQL
    Réponses: 2
    Dernier message: 06/11/2006, 15h52

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo