Filtre de recherche avec checkbox

**axobixykiwi** · 12/07/2021, 11h25

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>

**Toufik83** · 12/07/2021, 19h13

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

**axobixykiwi** · 12/07/2021, 19h47

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

**axobixykiwi** · 13/07/2021, 08h45

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

**Toufik83** · 13/07/2021, 14h57

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);
        }
    });

**axobixykiwi** · 13/07/2021, 15h47

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

Filtre de recherche avec checkbox

jQuery

Discussions similaires

Partager

Partager