[AJAX] Filtrer un tableau en fonction d'une liste déroulante

**than24** · 11/10/2012, 15h51

bonjour les developpeurs!!!!! je suis entrain de realiser une application php et je rencontre un probleme dans un de mes formulaire .ma question est la suivante comment afficher un tableau en fonction de la selection dans une liste deroulante.ou bien comment filtrer les valeurs de ce tableau en fonction de cette liste .et je souhaiterais le faire en ajax.
merci d'avance .

**andry.aime** · 11/10/2012, 19h20

Bonsoir,

Regarde ce tutoriel.

A+.

**than24** · 06/11/2012, 11h44

Je te remercie quand même pour ta réponse mais c'est pas ce que je recherche.
J'ai trouvé mon bonheur auprès de jQuery et voici le code pour ceux qui en aurons besoin.

Page index :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Tutoriel tri de liste sur Ao6-Labs.eu</title>
		<script src="js/jquery.min.js"></script>
		<script src="js/filtre.js"></script>
		<!-- LES ENFANTS, JULIEN EST UN DEVELOPPEUR COMPLETEMENT FOU,
		NE METTEZ JAMAIS VOS STYLES CSS DANS VOTRE PAGE HTML CHEZ VOUS -->
		<style>
                        * {
                                margin: 0;
                                padding: 0;
                                font-family: Verdana, Arial, sans-serif
                        }
                        
                        
                </style>
	</head>
	<body>
		 <div id="lipsum">
 
	<div id="page">
 
				<strong>Filtre: choisissez un département</strong><br />
 
				<select name="deptList" id="deptList">
				<option value="00">    liste complete   </option>
				<?php
                                                include 'connexion.php';
                                                $res = mysql_query("SELECT code,libelle FROM detailcorp");
                                                while($row = mysql_fetch_assoc($res))
                                                {
                                                        echo "<option value='".$row["code"]."'>".$row["code"]. $row["libelle"]."</option>";
                                                }
                                                
                                        ?>
 
				</select>
 
			</div>
		<table border="1"><tr>
 
 
          <td width=100> code</td>
 
			 <td width=100>type</td> 
 
			 <td width=400>libelle</td>
 
			 <td width=100>categorie</td>
 
			  <td width=100>modifier  </td>
 
                </tr>
	</table>
			<ul id="liste">
 
 
			<?PHP 
                                            $req1 = mysql_query("SELECT * FROM detailgrade ");
                                                $num=mysql_num_rows($req1);
                                                while($res1=mysql_fetch_array($req1))
                                                {
                                                echo" 
                                <li data-departement=$res1[1]>
                                 
                                        <table ><tr><div>";
                                        
                                   
               echo" <td width=100> $res1[0]</td>";
                        
                         echo" <td width=100>$res1[1]</td>"; 
                        
                         echo"  <td width=400>$res1[2]</td>";
                        
                         echo" <td width=100>$res1[4]</td>";
                        
                         echo"  <td width=100>modifier  </td>";
               
                
                                        echo"</div></tr></table>
                                         
                                </li>
                                 ";
                                }
                                
          
                                ?>
 
 
			<p>&nbsp;</p>
</ul>
</div>
 
 
	</body>
</html>

filtre.js :

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$(document).ready(function(){
 
	$("#deptList").change(function(){
		var dptChoose = $(this).val(); // on récupère la value de l'option selectionnée
 
		// On traite des chaines, il est donc important de mettre deux 0 ( car l'option a comme value '00' ).
		if(dptChoose == "00")
		{
			$("ul#liste li").slideDown();
			return;
		}
 
		var i=0;
		$("ul#liste li:not(#displayIfNothingFound)").each(function(){
			if($(this).data("departement") != dptChoose)
				$(this).slideUp();
			else
			{
				i++;
				$(this).slideDown();
			}
		});
 
		// si il n'y a pas de résultat, on montre l'item fait pour, sinon si il y en a et que cet item est visible, on le cache.
		if(i == 0 && $("#displayIfNothingFound:visible").length == 0)
			$("#displayIfNothingFound").slideDown();
		else if(i > 0 && $("#displayIfNothingFound:visible").length == 1)
			$("#displayIfNothingFound").slideUp();
	});
});

et de la bibliothèque : jquery.min.js que vous pouvez télécharger.

Merci et mon problème est résolu.

[AJAX] Filtrer un tableau en fonction d'une liste déroulante

AJAX

Discussions similaires

Partager

Partager