[AJAX] Filtrer comme Excel un tableau PHP

Version imprimable

Bonjour,
Dans le sujet de mon stage en entreprise, je dois pouvoir appliqué des filtres comme sous excel sur le tableau de resultat d'une requete SQL.
Sachant que par exemple j'ai la table membre avec nom, prenom dedans.
J'ai deux listes déroulante : nom et prenom
Si je selectionne Dupont dans les nom et que j'ai les freres dupont : Jean et Gerard il ne doit y avoir plus que Jean et Gerard d'afficher dans les prenoms.
Et en dessous du formulaire de recherche les resultats s'affiche sans mettre a jour toute la page.

Jusqu'a maintenant j'ai fait quelque chose d'un peu flou et faux :mouarf:
J'ai une premiere page test.php qui contient le formulaire de "filtrage" a 7 Champs. Par AJAX dès que je modifiais une de mes listes J'envoyais tous les valeurs de chaque liste, par la méthode GET, a la page test2.php.
Suite a ca la page 2 se connect a la DB, recupere mon tableau de TOUTE les valeurs et pas seulement celle filtrer, et ensuite traite le filtrage a l'aide de 2 tableaux : Celui contenant toutes les données et celui contenant les données filtré.

Le filtrage ce fait de la maniere suivante (Bien sur ici j'ai appliqué a mon exemple de nom et prenom)
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 if(isset($_GET['nom']) && $_GET['nom']!="" && $_GET['nom']!="Nom") { $tabFiltre = ajouterFiltre($tabDonnee,$tabFiltre, $_GET['nom'], 0); } if(isset($_GET['prenom']) && $_GET['prenom']!="" && $_GET['prenom']!="Prenom") { $tabFiltre = ajouterFiltre($tabDonnee,$tabFiltre, $_GET['prenom'], 1); } function ajouterFiltre($tabDonnee, $tabFiltre, $filtre, $colonne){ if(sizeof($tabFiltre)>0){ for($i = 0; $i < sizeof($tabFiltre); $i++) if($tabFiltre[$i][$colonne] != $filtre) unset($tabFiltre[$i]); $tabFiltre=array_values($tabFiltre); } else { for($i = 0; $i < sizeof($tabDonnee); $i++) { if(($tabDonnee[$i][$colonne]==$filtre)==0) array_push($tabFiltre,$tabDonnee[$i]); } } return $tabFiltre; }
Je creer ensuite un tableau contenant les resultats de ma requete et ce tableau je le renvoie pour le recevoir sur test.php grace a responsesText.

Seulement je pense que vous l'avez compris je ne peux pas recuperer de variable $tableau contenant ce tableau dans test.php et donc il m'est impossible de mettre a jour mes autres champs comme ici le champ prenom.
Mon but est donc de pouvoir avoir cette variable sans passé par les SESSIONS ou les COOKIES.

J'ai décidé de passé par AJAX pour ne pas avoir a changer de page et pouvoir executé en arriere plan les requetes.

Si vous avez d'autre informations n'hésiter pas !

Merci d'avance :)

Cordialement,
Neobrain

26/04/2013, 14h10
andry.aime

Bonjour,

Fait une petite recherche sur "javascript tablesorter".

A+.
26/04/2013, 14h51
Neobrain

C'est plus du tri d'un tableau ca, moi ce n'est pas du tri mais du filtre que je veux faire :(
26/04/2013, 15h06
andry.aime

Ok, on modifie alors les mots clés pour la recherche "jQuery table filter" :ccool:.
26/04/2013, 15h32
Neobrain

Après avoir chercher toute la journée voici la solution ! Merci beaucoup :mrgreen:

Par contre, j'peux tout a faire faire ce type de filtrage tout en affichant les lignes sur plusieurs pages ?
Car bon il y aura a peu près 3000 élements dans ma base final donc bon : /

EDIT : Je sais faire du decoupage de resultat par page mais la ca pose un probleme du faite que le tableau est un resultat de la requete asynchrone :lol: Je craque un peu ^^
29/04/2013, 08h03
Neobrain

Bonjour,
J'ai recherché un peu et je n'ai pas encore trouvé le moyen de dissocié les colonnes de filtrage du tableau ce qui est mon but final, j'aimerais affiché le resultat sur plusieurs "pages".
En faite c'est plutot afficher le resultat comme les topics ici, après un certains nombre de message il 2 ou plusieurs pages.

Merci.

Cordialement

Pas de reponse..
Je retente ma chance, cette fois ci j'ai recréer les fonction qui me permette d'afficher ou non des elements de mon tableau en fonction des filtres appliqués.
Le problème maintenant vient du découpage par page, je n'arrive pas a voir comment j'pourrais faire, pour les filtres j'utilise "display:none" ou "display:block" et pour les pages je ne peux donc pas l'utilisé puisque mes listes sont mise a jour en fonction de ce qui est "block" ou "none"..
J'ai essayé avec "visibility:hidden" ou "visibility:"

Par soucis de securité les infos de la requete SQL on été modifié.
Ci joint les différents scripts :
index.html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
	<head>
		<script src="recherche.js" language="javascript" type="text/javascript"></script>
	</head>
	<body onload="AppelScript();">
		<select id="selectLibelle" onchange="majTableau();">
			<option value="Libelle Ligne">Libelle Ligne</option>
		</select>
 
		<select id="selectDescription" onchange="majTableau();">
			<option value="Description Ligne">Description Ligne</option>
		</select>
		<div id="resultat">
		</div>
 
		<a href="#" onclick="page++; afficheTableau();">Page Suivante</a>
	</body>
</html>

recherche.js :

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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
var resultatParPage = 15;
var page = 0;
 
function AppelScript() {
	var xhr=null;
	if (window.XMLHttpRequest) { 
		xhr = new XMLHttpRequest();
	}
	else if (window.ActiveXObject) 
	{
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
 
	xhr.onreadystatechange = function() { reponse(xhr); };
 
	xhr.open("GET", "script.php", true);
	xhr.send(null);
}
 
function reponse (xhr) {
	if(xhr.readyState == 4)
	{
		if (xhr.status == 200)
		{
			var rep = xhr.responseText;
			document.getElementById("resultat").innerHTML = rep;
			afficheTableau();
			afficheListe();
		} else if (xhr.status == 400) {
			alert('Not Found!');
		}
	}
}
 
function changerPage() {
	var table = document.getElementById("test");
	var row = table.getElementsByTagName('tr');
	for (var i=0; i < row.length; i++)
	{
		row[i].style.visibility = "hidden";
	}
 
	for (var i=page*resultatParPage; i < (page*resultatParPage+resultatParPage)&&row.length; i++)
	{
		row[i].style.visibility = "";
	}
}
 
function afficheTableau() {
	var table = document.getElementById("test");
	var row = table.getElementsByTagName('tr');
	changerPage();
	for (var i=page*resultatParPage; i < (page*resultatParPage+resultatParPage)&&row.length; i++)
	{
		row[i].style.display = "block";
	}
}
 
function majTableau() {
	var table = document.getElementById("test");
	var row = table.getElementsByTagName('tr');
	var leselectLibelle = selectIndex(document.getElementById("selectLibelle"));
	var leselectDescription = selectIndex(document.getElementById("selectDescription"));
 
	afficheTableau();
 
	if(leselectLibelle.index != 0)
	{
		for (var i=0; i < row.length; i++)
		{
			if(row[i].cells[0].innerHTML!=leselectLibelle.value)
			{
				row[i].style.display = "none";
			}
		}
	}
 
	if(leselectDescription.index != 0)
	{
		for (var i=0; i < row.length; i++)
		{
			if(row[i].cells[1].innerHTML!=leselectDescription.value)
			{
				row[i].style.display = "none";
			}
		}
	}
 
	majListe();
}
 
function afficheListe() {
	var table = document.getElementById("test");
	var row = table.getElementsByTagName('tr');
	var leselectLibelle = document.getElementById("selectLibelle");
	var leselectDescription = document.getElementById("selectDescription");
	for (var i=0; i < row.length; i++)
	{
		if(row[i].style.display != "none")
		{
			leselectDescription.options[leselectDescription.length] = new Option(row[i].cells[1].innerHTML);
			leselectLibelle.options[leselectLibelle.length] = new Option(row[i].cells[0].innerHTML);
		}
	}
}
 
function majListe() {
	var table = document.getElementById("test");
	var row = table.getElementsByTagName('tr');
	var leselectLibelle = document.getElementById("selectLibelle");
	var leselectDescription = document.getElementById("selectDescription");
 
	var selectedLibelle = selectIndex(leselectLibelle).value;
	var selectedDescription = selectIndex(leselectDescription).value;
 
	afficheListe();
 
	if (selectedLibelle.index!=0 && selectedLibelle!="Libelle Ligne") {
		viderSelect (leselectLibelle);
		leselectLibelle.options[leselectLibelle.length] = new Option(selectedLibelle);
		leselectLibelle.options[leselectLibelle.length-1].selected = true;
	} else if  (selectedLibelle.index==0 || selectedLibelle=="Libelle Ligne"){
		viderSelect (leselectLibelle);
		for (var i=0; i < row.length; i++)
		{
			if(row[i].style.display != "none")
			{
				leselectLibelle.options[leselectLibelle.length] = new Option(row[i].cells[0].innerHTML);
			}
		}
	}
 
	if (selectedDescription.index!=0 && selectedDescription!="Description Ligne") {
		viderSelect (leselectDescription);
		leselectDescription.options[leselectDescription.length] = new Option(selectedDescription);
		leselectDescription.options[leselectDescription.length-1].selected = true;
	} else if  (selectedDescription.index==0 || selectedDescription=="Description Ligne"){
		viderSelect (leselectDescription);
		for (var i=0; i < row.length; i++)
		{
			if(row[i].style.display != "none")
			{
				leselectDescription.options[leselectDescription.length] = new Option(row[i].cells[1].innerHTML);
			}
		}
	}
}
 
function viderSelect (select) {
	tabOption = select.options;
	for (var i = select.length; i > 0; i--)
	{
		tabOption[i] = null;
	}
}
 
function selectIndex(select) {
	tabOption = select.options;
	return tabOption[tabOption.selectedIndex];
}

script.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
40
<?php
include_once('config/config.inc.php');
 
try {
	$db = new PDO('mysql:host='. HOST .';dbname='.DBNAME, USER, PASS);
	$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
	echo 'Échec lors de la connexion : ' . $e->getMessage();
}
 
$select = $db->query("SELECT nom, prenom FROM membre");
 
echo "<table id=\"test\">";
while ($donnee = $select->fetch())
{
		echo "<tr>";
		echo "<td>". formatText($donnee[0]) ."</td>";
		echo "<td>". formatText($donnee[1]) ."</td>";
		echo "</tr>";
}
echo "</table>";
 
function formatText($chaine)
{
	$chaine = htmlentities($chaine, ENT_NOQUOTES, 'ISO-8859-1');
	$chaine = preg_replace('#&([A-za-z])(?:acute|cedil|circ|grave|orn|ring|slash|th|tilde|uml);#', '\1', $chaine);
	$chaine = preg_replace('#&([A-za-z]{2})(?:lig);#', '\1', $chaine); // pour les ligatures e.g. '&oelig;'
	$chaine = preg_replace('#&[^;]+;#', '', $chaine); // supprime les autres caractères
	$chaine = preg_replace('#,#','.',$chaine);
 
	if($chaine == "")
	{
		$chaine = "non defini";
	} else {
		$chaine = strtolower($chaine);
	}
 
	return $chaine;
}
?>

Bonjour,
pourquoi ne pas utiliser un compteur qui te permet de générer ta pagination?
Code:

1 2 3 4 var numPage = ???; // à récupérer et commençant à 0 var nbParPage = 20; // par exemple var debEnreg = nbParPage * numPage; var finEnreg = debEnreg +nbParPage;

30/04/2013, 11h09
Neobrain

Le problème est de justement faire cette affichage.
Je n'arrive pas a "enlever" les elements qui ne sont pas censé être dans la page.

En fait plutôt que de les masquer je ne les mettrait pas.

Mais coté client tu peut toujours masquer les TR non concernées, par exemple
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 var debEnreg = nbParPage * numPage; var finEnreg = debEnreg +nbParPage; var oTable = document.getElementById("test"); var oRows = oTable.rows; // la nodeList des lignes // masque les premières lignes for( var i= 0; i < debEnreg; i++){ oRows[i].style.display = 'none'; } // affiche les concernées for( i = debEnreg; i < finEnreg; i++){ oRows[i].style.display = ''; } // masque les premières lignes for( i = finEnreg; i < oRows.length; i++){ oRows[i].style.display = 'none'; }
on doit pas en être bien loin, à la gestion des bornes prête.

nota: il n'y a rien d'Ajax là dedans!

Ne pas les mettre ?
Cela veut dire qu'on devrait rappeler le script PHP à chaque modification c'est bien ca ?
J'ai réussi a faire un système de page, mais la je cherche un moyen de le faire correctement car actuelle si un resultat lors de l'affichage de toutes les lignes se trouve page 2, lors de l'application de filtre il restera page 2 au lieu de remonter en quelque sorte dans le tableau et donc de passé page 1..
J'suis désolé de posé toutes ses questions, je cherche aussi de mon côté, je progresse mais il me reste toujours quelques inconnues.

Actuellement lorsque je fais F5 par exemple mon script n'est pas mis a jour il faut que je ferme l'onglet et que je le réouvre, je ne sais pas exactement pourquoi d'ailleurs.

Si ce n'est pas de l'AJAX pardonnez moi et si posisble deplacé dans la bonne section :oops:

Voici à nouveau les scripts qui ont donc été modifié.

Merci.

index.html

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
	<head>
		<title>Essais Formulaire de recherche</title>
		<script src="recherche.js" type="text/javascript"></script>
		<link rel="stylesheet" href="style.css">
	</head>
	<body onload="AppelScript();">
		<div>
			<select id="selectLibelle" onchange="majTableau();">
				<option value="Libelle Ligne" selected>Libelle Ligne</option>
			</select>
 
			<select id="selectDescription" onchange="majTableau();">
				<option value="Description Ligne"  selected>Description Ligne</option>
			</select>
			<br />
 
		</div>
		<div id="resultat">
		</div>
		<div id="page">
				<a href="#" onclick="precedent(); afficheTableau();">&lt;</a>
				<span id="numeroPage">Page : </span>
				<a href="#" onclick="suivant(); afficheTableau();">&gt;</a>
		</div>
	</body>
</html>

recherche.js :

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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
Array.prototype.unset = function(val){   
	var index = this.indexOf(val) 
	if(index > -1){  
		this.splice(index,1); 
	} 
} 
 
var tabLigneVisible = [];
var filtreActif = [];
var resultatParPage = 15;
var page = 0;
var nbTotalPage = 0;
 
function precedent() {
	if(page > 0) page--;
	majNumPage();
}
 
function suivant() {
	if(page < (nbTotalPage-1)) page++;
	majNumPage();
}
 
function majNumPage() {
	document.getElementById('numeroPage').innerHTML = "Page : " + (page+1) + " / " + nbTotalPage;
}
 
function AppelScript() {
	var xhr=null;
	if (window.XMLHttpRequest) { 
		xhr = new XMLHttpRequest();
	}
	else if (window.ActiveXObject) 
	{
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
 
	xhr.onreadystatechange = function() { reponse(xhr); };
 
	xhr.open("GET", "script.php", true);
	xhr.send(null);
}
 
function reponse (xhr) {
	if(xhr.readyState == 4)
	{
		if (xhr.status == 200)
		{
			var rep = xhr.responseText;
			document.getElementById("resultat").innerHTML = rep;
 
			var table = document.getElementById("test");
			var row = table.getElementsByTagName('tr');
 
			for (var i=0; i < row.length; i++)
			{
				tabLigneVisible[i] = true;
			}
			afficheTableau();
			majListe();
		} else if (xhr.status == 400) {
			alert('Not Found!');
		}
	}
}
 
function compterNbPage() {
	var nbResultat = 0;
	for(var i = 1; i < tabLigneVisible.length; i++)
	{
		if (tabLigneVisible[i]) nbResultat++;
	}
	return Math.ceil(nbResultat/resultatParPage);
}
 
function afficheTableau() {
	var table = document.getElementById("test");
	var row = table.getElementsByTagName('tr');
	nbTotalPage = compterNbPage();
 
	for (var i=1; i < row.length; i++)
	{
		row[i].style.display = "none";
	}
 
	for (var i=page*resultatParPage; i < (page*resultatParPage+resultatParPage)&&row.length; i++)
	{
		if(tabLigneVisible[i])
		{
			row[i].style.display = "table-row";
		}
		else
		{
			row[i].style.display = "none";
		}
	}
 
	majNumPage();
}
 
function majTableau() {
	var table = document.getElementById("test");
	var row = table.getElementsByTagName('tr');
	var leselectLibelle = selectIndex(document.getElementById("selectLibelle"));
	var leselectDescription = selectIndex(document.getElementById("selectDescription"));
 
	for (var i=1; i < row.length; i++)
	{
		tabLigneVisible[i] = true;
	}
 
	if(leselectLibelle.index != 0)
	{
		for (var i=1; i < row.length; i++)
		{
			if(row[i].cells[0].innerHTML!=leselectLibelle.value)
			{
				tabLigneVisible[i] = false;
			}
			else
			{
				tabLigneVisible[i] = true;
			}
		}
	}
 
	if(leselectDescription.index != 0)
	{
		for (var i=1; i < row.length; i++)
		{
			if(row[i].cells[1].innerHTML!=leselectDescription.value)
			{
				tabLigneVisible[i] = false;
			}
			else
			{
				tabLigneVisible[i] = true;
			}
		}
	}
	majListe();
	afficheTableau();
}
 
function majListe() {
	var table = document.getElementById("test");
	var row = table.getElementsByTagName('tr');
	var leselectLibelle = document.getElementById("selectLibelle");
	var leselectDescription = document.getElementById("selectDescription");
	var libelle = leselectLibelle.options[leselectLibelle.selectedIndex].value;
	var description = leselectDescription.options[leselectDescription.selectedIndex].value;
 
	if (leselectLibelle.selectedIndex!=0) {
		viderSelect (leselectLibelle);
		leselectLibelle.options[leselectLibelle.length] = new Option(libelle);
		leselectLibelle.options[leselectLibelle.length-1].selected = true;
	} else {
		viderSelect (leselectLibelle);
		for (var i=1; i < row.length; i++)
		{
			if(tabLigneVisible[i])
			{
				if(!inSelect(leselectLibelle, row[i].cells[0].innerHTML)) leselectLibelle.options[leselectLibelle.length] = new Option(row[i].cells[0].innerHTML);
			}
		}
	}
 
	if (leselectDescription.selectedIndex!=0) {
		viderSelect (leselectDescription);
		leselectDescription.options[leselectDescription.length] = new Option(description);
		leselectDescription.options[leselectDescription.length-1].selected = true;
	} else {
		viderSelect (leselectDescription);
		for (var i=1; i < row.length; i++)
		{
			if(tabLigneVisible[i])
			{
				if(!inSelect(leselectDescription, row[i].cells[1].innerHTML)) leselectDescription.options[leselectDescription.length] = new Option(row[i].cells[1].innerHTML);
			}
		}
	}
}
 
function inSelect(leselect, valeur) {
	for(var i = 0; i < leselect.options.length; i++)
	{
		if(leselect.options[i].value == valeur) return true;
	}
 
	return false;
}
 
function viderSelect (select) {
	tabOption = select.options;
	for (var i = select.length; i > 0; i--)
	{
		tabOption[i] = null;
	}
}
 
function selectIndex(select) {
	tabOption = select.options;
	return tabOption[tabOption.selectedIndex];
}

script.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
40
41
42
43
44
45
46
<?php
include_once('config/config.inc.php');
 
try {
	$db = new PDO('mysql:host='. HOST .';dbname='.DBNAME, USER, PASS);
	$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
	echo 'Échec lors de la connexion : ' . $e->getMessage();
}
 
$select = $db->query("SELECT nom, prenom FROM membre");
 
echo "<table id=\"test\" width=900>";
echo "<th>Libelle</th>";
echo "<th>Description</th>";
$i = 0;
while ($donnee = $select->fetch())
{
		if ($i%2==0) { echo "<tr class='pair tdsurvol'>"; }
		else { echo "<tr class='impair tdsurvol'>"; }
		echo "<td>". formatText($donnee[0]) ."</td>";
		echo "<td>". formatText($donnee[1]) ."</td>";
		echo "</tr>";
 
	$i++;
}
echo "</table>";
 
function formatText($chaine)
{
	$chaine = htmlentities($chaine, ENT_NOQUOTES, 'ISO-8859-1');
	$chaine = preg_replace('#&([A-za-z])(?:acute|cedil|circ|grave|orn|ring|slash|th|tilde|uml);#', '\1', $chaine);
	$chaine = preg_replace('#&([A-za-z]{2})(?:lig);#', '\1', $chaine); // pour les ligatures e.g. '&oelig;'
	$chaine = preg_replace('#&[^;]+;#', '', $chaine); // supprime les autres caractères
	$chaine = preg_replace('#,#','.',$chaine);
 
	if($chaine == "")
	{
		$chaine = "non defini";
	} else {
		$chaine = strtolower($chaine);
	}
 
	return $chaine;
}
?>