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 :

Filtre de recherche avec checkbox


Sujet :

jQuery

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juillet 2021
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Moselle (Lorraine)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juillet 2021
    Messages : 16
    Points : 6
    Points
    6
    Par défaut Filtre de recherche avec checkbox
    Bonjour tout le monde,

    Voila j'ai un soucis, j'ai fait un filtre de recherche dynamique qui fonctionne partiellement ainsi que des checkbox pour "tout séléctionner" qui elles fonctionnent mais lorsque que j'applique le filtre et que je veux tout séléctionner parmis ce qui est affiché avec le filtre et bien ça séléctionne toute ma page avec les checkbox avant le filtre mis en place.

    hors j'aimerais que lorsque le filtre est en marche et bien ca séléctionne que les lignes affichées.

    J'utilise du php et javascript pour le filtre et les checkbox.

    Mes données viennent d'une base de donnée.

    J'ai mes valeurs qui viennent d'une base de données mais que je choisis avant d'arriver sur ma page où je peux chercher le filtre et séléctionner.

    Le tout est sur une page en php qui s'autogénére en fonction de la date choisie sur la page précédente

    je vous met mon code de filtre et de checkbox.
    Merci d'avance pour votre aide!


    Select all
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <script type="text/javascript">
    $(document).ready(function(){
        $('#select_all2').on('click',function(){
            if(this.checked){
                $('.checkbox2').each(function(){
                    this.checked = true;
                });
            }else{
                 $('.checkbox2').each(function(){
                    this.checked = false;
                });
            }
        });
     
        $('.checkbox2').on('click',function(){
            if($('.checkbox2:checked').length == $('.checkbox2').length){
                $('#select_all2').prop('checked',true);
            }else{
                $('#select_all2').prop('checked',false);
            }
        });
    });


    filtre
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <html><center><input type="text" id="myInput" onkeyup="myFunction()" placeholder="recherche ligne.." ></center></html>
     
    <script>
    function myFunction() {
      var input, filter, table, tr, td, i, txtValue;
      input = document.getElementById("myInput");
      filter = input.value.toUpperCase();
      table = document.getElementById("myTable");
      tr = table.getElementsByTagName("tr");
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[2];
        if (td) {
          txtValue = td.textContent || td.innerText;
          if (txtValue.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
          }
        }       
      }
    }
    </script>

  2. #2
    Membre expert Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    1 886
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 1 886
    Points : 3 577
    Points
    3 577
    Par défaut
    Bonjour,

    Tout d'abord, ne mélange pas la syntaxe jQuery et js pur, ton code de myFunction() peut se résumer à :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
     
    function myFunction() {
      var input, filter, table, tr;
      input = $("#myInput");
      filter = input.val().toUpperCase();
      table = $("#myTable");
      tr = table.find("tr").not("tr:first");
      tr.each(function(){
    	if($(this).find('td').eq(2).text().toUpperCase().indexOf(filter)>-1){
    		$(this).css('display','');
    	}else{
    		$(this).css('display',"none");
    	}
      });
    }
    Après j'avoue que j'ai relu le discussion plus que 5 fois mais j'ai du mal à comprendre ce que tu cherches à faire, surtout avec le manque d'éléments (code html de la table + checkbox).

    Tu veux appliquer le filtre seulement sur les lignes cochés ? est-ce que chaque <tr> contient un checkbox?

    Ce serait gentil si tu mets un exemple en ligne (sur jsfiddle.net ou bien Codepen) afin qu'on puisse t'aider...

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juillet 2021
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Moselle (Lorraine)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juillet 2021
    Messages : 16
    Points : 6
    Points
    6
    Par défaut
    Salut Toukif83 merci pour ta réponse et ton aide pour mon code,

    Je vais essayer d'expliquer mieux : en gros je cherche a ce que lorsque j'applique le filtre dynamique sur ma table je souhaite pouvoir sélectionner seulement ce qui est affiché avec le filtre avec mon bouton tout sélectionner. Chaque ligne (<tr>) contient une checkbox. Je vous posterais le code html que la page génére grace au php car les données viennent d'une base de donnée donc je vous poste ça demain matin car la je n'ai pas la possibilité de le faire.

    Bonne soirée a vous

  4. #4
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juillet 2021
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Moselle (Lorraine)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juillet 2021
    Messages : 16
    Points : 6
    Points
    6
    Par défaut
    Salut tout le monde, alors pour ma page qui se génére elle se ressemble a ca :
    Ceci est une petite partie de la page html mais je pense que ca sere suffisant comme exemple car sinon c'est beaucoup trop long
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
     
    <html>
    <head>
    </head>
    <body>
    <center><input type="text" id="myInput" onkeyup="myFunction()" placeholder="recherche ligne.."></center>
    <link rel="stylesheet" href="style.css">
     
    &#65279;<form action="start.php" methode="GET"><table id="myTable"><tbody>
    <tr><th width="100">Date</th><th width="100">Distance</th><th width="100">Ligne</th><th width="600">Libelle</th><th width="100">Voyage</th><th width="150"><input type="checkbox" id="select_all2">Effectué</th><th width="170">Raison</th><th>Commentaire</th><th width="50"> Supprimer<input type="checkbox" id="select_all">ALL</th></tr>
    <tr>
    <td align="center">04/01/2018</td>
    <td align="center">23490</td>
    <td align="center">2</td>
    <td align="center">Algrange - Hayange - IUT Thionville-Yutz</td>
    <td align="center">440</td>
    <td align="center"> voyage effectué</td>
    <td align="center">Erreur Conducteur</td>
    <td>KAHLAOUI-BRETON</td>
    <td align="center"><input type="checkbox" class="checkbox" name="1981600" value="1"></td>
    </tr>
    <tr>
    <td align="center">04/01/2018</td>
    <td align="center">23490</td>
    <td align="center">2</td>
    <td align="center">Algrange - Hayange - IUT Thionville-Yutz</td>
    <td align="center">448</td>
    <td align="center"><input type="checkbox" class="checkbox2" name="198420000000" value="1"></td>
    <td align="center"><select name="19842"><option value="0" selected="selected"></option><option value="1">Panne bus</option><option value="2">Supprimé par PO</option><option value="3">Absence conducteur</option><option value="4">Greve</option><option value="5">Intemperie</option><option value="6">Problème technique</option><option value="7">Erreur Conducteur</option><option value="8">Problème sous traitant</option></select></td>
    <td><input type="text" name="19842c" size="15"></td>
    <td align="center"><input type="checkbox" class="checkbox" name="1984200" value="1"></td>
    </tr>
    </tbody></table><center>
    <input name="submit_button" class="btnsub" type="submit" value="Valider">
    </center>
    </form>
     
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
     
    //checkBox de suppression
    <script type="text/javascript">
    $(document).ready(function(){
        $('#select_all').on('click',function(){
            if(this.checked){
                $('.checkbox').each(function(){
                    this.checked = true;
                });
            }else{
                 $('.checkbox').each(function(){
                    this.checked = false;
                });
            }
        });
        
        $('.checkbox').on('click',function(){
            if($('.checkbox:checked').length == $('.checkbox').length){
                $('#select_all').prop('checked',true);
            }else{
                $('#select_all').prop('checked',false);
            }
        });
    });
    //Checkbox effectuée
    </script>
     
    <script type="text/javascript">
    $(document).ready(function(){
        $('#select_all2').on('click',function(){
            if(this.checked){
                $('.checkbox2').each(function(){
                    this.checked = true;
                });
            }else{
                 $('.checkbox2').each(function(){
                    this.checked = false;
                });
            }
        });
        
        $('.checkbox2').on('click',function(){
            if($('.checkbox2:checked').length == $('.checkbox2').length){
                $('#select_all2').prop('checked',true);
            }else{
                $('#select_all2').prop('checked',false);
            }
        });
    });
    </script>
     
    //filtre
    <script>
    function myFunction() {
      var input, filter, table, tr, td, i, txtValue;
      input = document.getElementById("myInput");
      filter = input.value.toUpperCase();
      table = document.getElementById("myTable");
      tr = table.getElementsByTagName("tr");
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[2];
        if (td) {
          txtValue = td.textContent || td.innerText;
          if (txtValue.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
          }
        }       
      }
    }
    </script>
    </body></html>

    Le code du dessous est une ligne d'exemple lorsque le filtre est actif et que cette ligne est cachée
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    <tr style="display: none;">
    <td align="center">04/01/2018</td>
    <td align="center">26431</td>
    <td align="center">96</td>
    <td align="center">Hayange - Ottange</td>
    <td align="center">21</td>
    <td align="center"> voyage effectué</td>
    <td align="center">Erreur Conducteur</td>
    <td>EDERLE</td><td align="center"><input type="checkbox" class="checkbox" name="1994400" value="1"></td>
    </tr>

  5. #5
    Membre expert Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    1 886
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 1 886
    Points : 3 577
    Points
    3 577
    Par défaut
    Bonjour,

    Si les cases à cocher des lignes cachées s'activent lorsque tu cliques sur #select_all, c'est parce que ton code de clic s'exécute sur toutes les lignes, y compris celles qui sont masquées, il va falloir cibler seulement les lignes visibles avec le sélecteur :visible :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    $('#select_all2').on('click',function(){
            if(this.checked){
                $('tr:visible .checkbox2').prop("checked",true);
            }else{
                 $('tr:visible .checkbox2').prop("checked",false);
            }
        });

  6. #6
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    juillet 2021
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Moselle (Lorraine)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juillet 2021
    Messages : 16
    Points : 6
    Points
    6
    Par défaut
    Bonjour,
    Merci beaucoup pour ton aide ca marche super tu viens de résoudre mon problème que j'ai depuis 2-3 jours et je bloquais la dessus franchement t'es un boss.
    Maintenant je m'attaque aux fichiers en .ini et c'est la première fois que je vais faire ça j'espère ne pas trop avoir de mal

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

Discussions similaires

  1. Réponses: 3
    Dernier message: 31/10/2019, 10h20
  2. Problème d'affichage recherche avec checkbox
    Par Atchoum89 dans le forum Langage
    Réponses: 12
    Dernier message: 26/07/2011, 11h27
  3. Recherche avancée avec checkbox
    Par Marcus15 dans le forum Langage
    Réponses: 6
    Dernier message: 05/07/2007, 17h15
  4. Recherche SelectBox avec Checkbox pour multiselection
    Par yousky dans le forum Général JavaScript
    Réponses: 14
    Dernier message: 08/03/2007, 09h27
  5. probleme avec des filtres de recherche sur des dates
    Par MCarole dans le forum Access
    Réponses: 2
    Dernier message: 24/07/2006, 10h22

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