filtrer avec checkbox les données mysql affichées par un tableau

Version imprimable

04/03/2013, 10h02
Xeuch

filtrer avec checkbox les données mysql affichées par un tableau

Bonjour,

Débutant en PHP, j'ai affiché à l'aide d'un tableau mes données contenues dans ma base de données MYSQL. Le tableau affiche une colonne ville et une colonne pays associé.

J'aimerais avoir un bouton "filtrer par pays" en haut du tableau qui lorsque je clique dessus m'affiche une liste de checkbox des pays. A partir de là je pourrais cocher les pays pour lesquels je veux afficher leurs villes .L'affichage se fera automatiquement quand je coche un pays. Par défaut si aucun checkbox n'est coché, je dois afficher toutes les villes.

Je sais que ça dois se faire avec le JavaScript (que je ne maitrise pas bien pour le moment) mais je sais pas si à chaque fois je dois aller chercher les données (villes) correspondant à un pays quand celui ci est coché ou bien s'il y a une méthode qui permet d'afficher certaines ville si leur pays est coché et de ne pas les afficher sinon.

J'aimerai que vous m'aidiez en me disant comment faire ce filtre.
S'il y'a aussi un petit exemple je suis vraiment preneur.

Merci d'avance de votre aide.

Apres avoir travaillé dessus en utilisant Ajax, j'ai fais un code mais qui ne marche toujours pas.
J'ai créer un bouton "filtrer par domaine" quand on clique sur ce bouton, j'affiche sur la meme page la liste des checkboc contenant tous les pays (DOMAINE ici)
Mais quand je coche une domaine, rien ne se passe.:(

Je suis vraiment planté actuellement

voici le code la page selectTypOperUpdate.php

pour moi pays =DOMAINE
et ville = type opération

Code:

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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
</html>
<head> 
<title>editer type operation</title> 
<script type='text/javascript'>
 
	function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
	/**
			* Méthode qui sera appelée quand une case est coché
			*/
			function go(){
				var xhr = getXhr();
 
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leTableau = xhr.responseText;
						document.getElementById('tabeoperation').innerHTML = leTableau;
					}
				}
 
				// utilisation du post
				xhr.open("POST","ajaxSelectTypOper.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ici, recuperation l'id du domaine (qui est la clé primaire de ma table domaine)
				var checkboxes = document.getElementById("formSaisie").getElementsByTagName("input");
				for (var i = 0, iMax = checkboxes.length; i < iMax; ++i) {
					var check = checkboxes[i];
					if (check.type == "checkbox" && check.checked) 
					{
						//Acces ici à chaque checkbox cochée avec check[i]
						domaine = check.name;
						xhr.send("domaine="+domaine);
					}
				}
			}
 
</script>
 
</head> 
 
<link rel="stylesheet" href="styleTable.css" />
	<body> 
			<h2>Choisir le programme que vous voulez editer</h2> 
 
			<form>
				<input type="submit" name="filter" value="filtrer avec Domaine">
			</form>
		<?php
			$link=mysql_connect("localhost", "root", "" );  
			$bdd=mysql_select_db("basec3p",$link );  
			if(!$bdd){
				die ('Impossible de sélectionner la base de données : ' . mysql_error());
			}
			$reponse = mysql_query("SELECT * FROM typeoperation " );
			$rep2=mysql_query("SELECT DISTINCT domaine FROM domaine " );
 
			if (isset($_GET['filter']))
			{
			?>
			<form id="formSaisie" action="selectTypOperUpdate.php" method="post" onsubmit='go()' >
				<fieldset style="width: 800px">
					<legend>Critere d'affichage</legend>
					<?php
						while($tousDomaine=mysql_fetch_array($rep2)){
						?>
 
								<input type="checkbox" name="<?php echo $tousDomaine['domaine'] ?>" id="<?php echo $tousDomaine['domaine'];?> "/> 
								<label for="<?php echo $tousDomaine['domaine'];?>"><?php echo $tousDomaine['domaine'];?></label><br />
						<?php
						}?>
						<!-- COCHER TOUS-->
						<!--<input type="checkbox" onClick="checkAll('cases[]', this.checked);" />Tout cocher/décocher -->
				</fieldset>
				</br><input name="ok" type="submit" value="ok" />   <!-- ENVOYER LE FORMULAIRE-->
			</form>
				<?php
			}
 
			//$i=0; //pour l'affichage des numeros
			?>
			<table id="tabeoperation">
				<caption>Liste de types d'operation APR</caption>
				<tr>
				   <th>Nom du type d'opération</th>
				   <th> Domaine associé	</th>
				   <th> Editer </th>
				   <th> supprimer </th>
				</tr>
 
				<?php while($donnees = mysql_fetch_array($reponse))
				{		
					//$i=$i+1; //incrementer le compteur
					$typeoper=$donnees['typeoper'];
					$domaineAssocie=$donnees['domaine'];
				?>
					<tr>
						<td><?php echo $typeoper;?></td>
						<td><?php echo $domaineAssocie;?></td>
						<td><a href="updateTypeOper.php?action=edit&amp;nom=<?php echo $typeoper; ?>"><img src="crayon.jpg" alt="edit" title="Editer ce type operation" /></a></td>
						<td><a href="updateTypeOper.php?action=delete&amp;nom=<?php echo $typeoper; ?>" onClick="javascript:return confirm('Voulez-vous vraiment supprimer cet élément ?')">
						<img src="croix.jpg" alt="delete" title="Supprimer ce type d'opération" /></a></td>
					</tr>
				<?php
				}
				mysql_close($link);
				?>
 
			</table>
	<p><a href="updateDonneesAPR.html"><img src="BoutonRetour.jpg" title="retour" /> </a></p>
</body> 
</html>

et voici le code la page de traitement ajaxSelectTypOper.php

Code:

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
<?php
	echo "<select name='typeOperAssocie'>";
	if(isset($_POST['domaine'])){
		$link=mysql_connect("localhost", "root", "" );  
		$bdd=mysql_select_db("basec3p",$link );  
		if(!$bdd){
			die ('Impossible de sélectionner la base de données : ' . mysql_error());
		} 	
		$domaineAssocieTypOper=$_POST['domaine'];
		$reponseTypOper = mysql_query("SELECT typeoper FROM typeoperation WHERE domaine=\"$domaineAssocieTypOper\"" ); ?>
		<table id="tabeoperation">
			<caption>Liste de types d'operation APR</caption>
			<tr>
			   <th>Nom du type d'opération</th>
			   <th> Domaine associé	</th>
			   <th> Editer </th>
			   <th> supprimer </th>
			</tr>
 
			<?php while($donnesDomaine = mysql_fetch_array($reponseTypOper))
			{		
				$typeoper=$donnesDomaine['typeoper'];
				$domaineAssocie=$donnesDomaine['domaine'];
			?>
				<tr>
					<td><?php echo $typeoper;?></td>
					<td><?php echo $domaineAssocie;?></td>
					<td><a href="updateTypeOper.php?action=edit&amp;nom=<?php echo $typeoper; ?>"><img src="crayon.jpg" alt="edit" title="Editer ce type operation" /></a></td>
					<td><a href="updateTypeOper.php?action=delete&amp;nom=<?php echo $typeoper; ?>" onClick="javascript:return confirm('Voulez-vous vraiment supprimer cet élément ?')">
					<img src="croix.jpg" alt="delete" title="Supprimer ce type d'opération" /></a></td>
				</tr>
			<?php
			}
			mysql_close($link);
			?>
		</table>
	<?php	
	}
?>

Bonjour,

J'ai un peu améliorer mon code mais j'ai toujours des soucis

Notation : pays ==>DOMAINE et

ville===>Type opération

En gros:

quand l'utilisateur arrive sur la page, je lui présente la liste de toutes les villes (je les appelles Type opération ici), je mets un bouton "filtrer par domaines" tous en haut du tableau. lorsqu'on clique sur ce bouton, j'affiche la liste des checkboxs contenant les pays (DOMAINE ici) et avec un bouton "ok" en bas muni de l'option onclick.
L'utilisateur cochera les noms de pays (DOMAINE ici) dont il souhaite afficher leurs villes ( type opération ici). Apres il doit cliquer sur le bouton "ok "qui le dirige vers la fonction 'go()' du javascript. Cette fonction va récupérer tous les noms des checkboxs qui sont cochés et les mettre dans un tableau que je passe à ma fonction Ajax qui fera les traitement appropriés (lancer les requêtes et afficher les résultats)

Le problème c'est que Quand je clique sur mon bouton "filtrer par domaine" j'ai bien ma liste de checkboxs mais après avoir coche les checkboxs, quand je clique sur le bouton "ok", rien ne se passe) :o

Je ne sais pas pourquoi??

j'ai des doutes sur le faite d'avoir mis des <div> dans le tableau et de modifié le contenu de la <div> en utilisant innerHTML (avec l'id de la <div>dans la fonction go() )

Aussi je ne sais pas si c'est bon de faire : quand l'utilisateur appuis pas sur le bouton "filtrer par domaines", afficher les checkboxs contenant ces derniers SINON afficher toutes les villes (type opération ici) .

Serait -il mieux de remplacer ça par un case "cocher tous" qui est affiché par défaut au début?

Voici le code

PAGE selectTypOperUpdate.php : page d'affichage avec javascript

Code:

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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
 
<!DOCTYPE html>
</html>
<head> 
<title>editer type operation</title> 
<script type='text/javascript'>
 
	function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                    return xhr;
			}
 
	/**
			* Méthode qui sera appelée quand une case est coché
			*/
			function go(){
				var xhr = getXhr();
 
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leTableau = xhr.responseText;
						document.getElementById('tabeoperation').innerHTML = leTableau;
					}
				}
 
				// utilisation du post
				xhr.open("POST","ajaxSelectTypOper.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ici, recuperation l'id du domaine (qui est la clé primaire de ma table domaine)
				var checkboxes = document.getElementsByTagName("choix");
				var MonTableau = new Array();
				for (var i = 0, iMax = checkboxes.length; i < iMax; ++i) {
					var check = checkboxes[i];
					if (check.type=="checkbox" && check.checked) 
					{
						//Acces ici à chaque checkbox cochée 
						domaine = check.name;
						MonTableau[i]=domaine;
					}
				}
				//envoi du tableau
				//xhr.send("MonTableau="+MonTableau);
				xhr.send("MonTableau="+JSON.stringify(MonTableau));
			}
 
</script>
 
</head> 
 
<link rel="stylesheet" href="styleTable.css" />
	<body> 
			<h2>Choisir le programme que vous voulez editer</h2> 
 
			<!-- Bouton filter au debut pour demander à l'utilisateur s'il veut filtrer ou pas-->
			<form>
				<input type="submit" name="filter" value="filtrer avec Domaine">
			</form>
 
		<?php
			$link=mysql_connect("localhost", "root", "" );  
			$bdd=mysql_select_db("basec3p",$link );  
			if(!$bdd){
				die ('Impossible de sélectionner la base de données : ' . mysql_error());
			}
			//requette pour afficher les type df'operation quand on arrive sur la page (avant filtre , on affiche tout les type d'operation)
			$reponse = mysql_query("SELECT * FROM typeoperation " );
 
			//requette pour chercher la liste des domaine à mettre dans les checkbox
			$rep2=mysql_query("SELECT DISTINCT domaine FROM domaine " );
 
			//Si onn a cliquer sur le bouton "filtrer avec domaine"
			if (isset($_GET['filter']))
			{
			?>
				<fieldset style="width: 800px">
					<legend>Critere d'affichage</legend>
					<?php
						//boucle pour afficher les checkbox
						while($tousDomaine=mysql_fetch_array($rep2)){
						?>
								<input class="choix" type="checkbox" name="<?php echo $tousDomaine['domaine'] ?>" id="<?php echo $tousDomaine['domaine'];?> "/> 
								<label for="<?php echo $tousDomaine['domaine'];?>"><?php echo $tousDomaine['domaine'];?></label><br />
						<?php
						}?>
				</fieldset>
				</br><input id="idFiltre" type="button" value="ok" onclick='go()'/>   <!-- VALIDER LE CHOIX-->
				<?php
			}
 
 
			//AFFICHAGE DU TABLEAU PAR DEFAUT QUAND ON ARRIVE SUR LA PAGE AVANT DE FILTRER
			else{
				//$i=0; //pour l'affichage des numeros
				?>
				<table>
					<caption>Liste de types d'operation APR</caption>
					<div id='tabeoperation'>
 
					<tr>
					   <th>Nom du type d'opération</th>
					   <th> Domaine associé	</th>
					   <th> Editer </th>
					   <th> supprimer </th>
					</tr>
 
					<?php while($donnees = mysql_fetch_array($reponse))
					{		
						//$i=$i+1; //incrementer le compteur
						$typeoper=$donnees['typeoper'];
						$domaineAssocie=$donnees['domaine'];
					?>
						<tr>
							<td><?php echo $typeoper;?></td>
							<td><?php echo $domaineAssocie;?></td>
							<td><a href="updateTypeOper.php?action=edit&amp;nom=<?php echo $typeoper; ?>"><img src="crayon.jpg" alt="edit" title="Editer ce type operation" /></a></td>
							<td><a href="updateTypeOper.php?action=delete&amp;nom=<?php echo $typeoper; ?>" onClick="javascript:return confirm('Voulez-vous vraiment supprimer cet élément ?')">
							<img src="croix.jpg" alt="delete" title="Supprimer ce type d'opération" /></a></td>
						</tr>
					<?php
					}
					mysql_close($link);
					?>
					</div>
				</table>
			<?php 
			}
			?>
	<p><a href="updateDonneesAPR.html"><img src="BoutonRetour.jpg" title="retour" /> </a></p>
</body> 
</html>

PAGE ajaxSelectTypOperUpdate.php : pade de traitement AJAX

Code:

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
 
 
 
<?php
// si le bouton ok a ete cliqué
	if(isset($_POST['ok'])){
		$link=mysql_connect("localhost", "root", "" );  
		//connexion à la bdd
		$bdd=mysql_select_db("basec3p",$link );  
		if(!$bdd){
			die ('Impossible de sélectionner la base de données : ' . mysql_error());
		} 	
		$tab=array();
		//$tab=$_POST['MonTableau'];
		$tab=json_decode($_POST['MonTableau']);
		if($tab!=NULL)
		{
			?>
 
			<!-- DEBUT DU TABLEAU-->
			<table id="tabeoperation">
				<caption>Liste de types d'operation APR</caption>
				<tr>
				   <th>Nom du type d'opération</th>
				   <th> Domaine associé	</th>
				   <th> Editer </th>
				   <th> supprimer </th>
				</tr>
			<?php
 
			//POUR CHAQUE ELEMENT DU TABLEAU RECUPERE
			foreach($tab as $element)
			{
				//RECUPERER LES TYPE OPERATION CORRESPONDANT ET FAIRE LAFFICHAGE
				$reponseTypOper = mysql_query("SELECT typeoper FROM typeoperation WHERE domaine=\"$element\"" );
				while($donnesDomaine = mysql_fetch_array($reponseTypOper))
				{		
					$typeoper=$donnesDomaine['typeoper'];
					$domaineAssocie=$donnesDomaine['domaine'];
				?>
					<tr>
						<td><?php echo $typeoper;?></td>
						<td><?php echo $domaineAssocie;?></td>
						<td><a href="updateTypeOper.php?action=edit&amp;nom=<?php echo $typeoper; ?>"><img src="crayon.jpg" alt="edit" title="Editer ce type operation" /></a></td>
						<td><a href="updateTypeOper.php?action=delete&amp;nom=<?php echo $typeoper; ?>" onClick="javascript:return confirm('Voulez-vous vraiment supprimer cet élément ?')">
						<img src="croix.jpg" alt="delete" title="Supprimer ce type d'opération" /></a></td>
					</tr>
				<?php
				}
			}
				mysql_close($link);
				?>
			</table>
		<?php	
		}
	}
?>

Merci d'avance de votre aide