Discussion :

[grenoult]

Bonjour,

Je maintiens actuellement une application intranet développée en PHP/MySQL.

Cette application est relativement basique techniquement (peu de JS, pas d'AJAX) car réalisée il y a quelques années.

Dans cette application, il y a une page qui liste les personnes (nom, prénom, téléphone, site géographique, etc.) et il est possible de trier la liste selon des <input>. Lorsque l'utilisateur rempli un des <input> et appuie sur Entrée, la liste est triée (en PHP, la requête SQL est construite selon le remplissage des inputs). Ça c'est le comportement par défaut de l'application.

Cependant, ne serait-ce pas le rôle du client de trier la liste des personnes (au lieu du serveur) ?

Car à l'heure actuelle, à chaque fois qu'on saisi un <input> et qu'on valide, on interroge à nouveau la BDD (et donc le serveur).

Dans mon cas, j'ai choisi d'effectuer le tri qu'en JavaScript, histoire de limiter les accès au serveur et d'accélérer le tri.

J'ai donc créé le code suivant :

• script JS :

(explications plus bas)

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
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
/* Autres variables globales déclarées dans des fonctions : 
- tcorps : correspond au tbody du tableau affiché
*/
tableaurecherche = new Array();
//Remplissage du tableau d'éléments de recherche à NULL
var i;
for (i=0;i<15;i++)
{
	tableaurecherche[i] = "";
}
 
/*
	Fonction qui va créer le tableau HTML à partir du "tableaudonnees" (tableau JS rempli par PHP)
*/
function creerTableau(idtable) 
{
	var i;
	var j;
	tabpers = document.getElementById(idtable); // VARIABLE GLOBALE Récupération du tableau <TABLE... >
	tcorps = document.createElement("tbody"); // VARIABLE GLOBALE Création de l'élément tbody 
	for (i=0;i<tableaudonnees.length;i++)
	{
		var ligne = document.createElement("tr");// Variable locale
		for (j=0;j<=9;j++)
		{
			cellule = document.createElement("td");
			//texte = document.createTextNode(tableaudonnees[i][j]); // Par CREATETEXTNODE
			texte = tableaudonnees[i][j]; // Par innerHTML
 
			//cellule.appendChild(texte);// Par CREATETEXTNODE
			cellule.innerHTML = texte; // Par innerHTML
			ligne.appendChild(cellule); //ligne->cellule
		}
		tcorps.appendChild(ligne); // tcorps->ligne
	}
	tabpers.appendChild(tcorps); // table->tcorps
} // On obtient au final : table->tcorps->ligne->cellule
 
/*
	Fonction qui va rechercher dans le tableau des données (JS) et va afficher/cacher les lignes du tableau (HTML)
	en conséquence.
	Au final, on va traiter 3 tableau :
	- celui de la recherche (créé au début du script et modifié à chaque appel)
	- celui des données (créé avec la page (PHP) ).
	- celui de l'affichage (HTML, créé lors de creationTableau() et modifié a chaque appel de selectionTableau()
	grâce au DOM).
*/
function selectionTableau(cherche,indice)
{
	/*
	Paramètres :
	-cherche : texte de l'élément recherché
	-indice : sur quelle colonne on recherche
	*/
	var i; // indice de parcours de tableau en ligne
	var j; // indice de parcours de tableau en colonne
	var donnees; // une valeur du tableau tableaudonnees
	var ligne; // ligne (<TR>)a afficher/cacher
	var reg; // Expression régulière pour la recherche
	var nontrouve; // booléen pour éviter des calculs inutiles
 
	// On remplit le tableau avec la valeur qu'on cherche
	tableaurecherche[indice] = cherche;
 
	//permet d'avoir un tableau de NULL si on a saisi une valeur précédemment et qu'on l'efface
	if (cherche.length == 0)
		tableaurecherche[indice] = "";
 
	//debug
	//var message = tableaurecherche[0]+"\n"+tableaurecherche[1]+"\n"+tableaurecherche[2]+"\n"+tableaurecherche[3]+"\n"+tableaurecherche[4]+"\n"+tableaurecherche[5]+"\n"+tableaurecherche[6]+"\n"+tableaurecherche[7]+"\n"+tableaurecherche[8]+"\n"+tableaurecherche[9];
	//alert(message);
 
	for (i=0;i<tableaudonnees.length;i++)// Ligne 
	{
		j=0;
		nontrouve = false;
		while (j < tableaurecherche.length && nontrouve == false) // Colonne
		{
			if (tableaurecherche[j] != "")
			{
				reg = new RegExp(tableaurecherche[j],'i');
				donnees = tableaudonnees[i][j];
				ligne = tcorps.childNodes[i];
				if (donnees.search(reg) >= 0) // trouvé
				{
					// IE et FF ne traitent pas de la même façon l'affichage d'un <TR>
					if (navigator.appName == "Microsoft Internet Explorer")
						ligne.style.display = "block";
					else
						ligne.style.display = "table-row";
				}
				else
				{
					ligne.style.display = "none";
					nontrouve = true;
				}
			}
			else
			{
				ligne = tcorps.childNodes[i];
				if (navigator.appName == "Microsoft Internet Explorer")
					ligne.style.display = "block";
				else
					ligne.style.display = "table-row";
			}
			j++;
		}
	}
}

Dans la page PHP qui reçoit les données du serveur :

• Le tableau des données (JS) est rempli par PHP :

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
<script language="javascript" type="text/javascript">
		var tableaudonnees = new Array(); // VAR GLOB. tableaudonnes contient toutes les infos récupérées par PHP
		<?php
                $i = 0;
        while ($ligne = mysql_fetch_array($result))
        {
                ?>
		tableaudonnees[<?php echo $i; ?>] = new Array();
		tableaudonnees[<?php echo $i; ?>][0] = "<?php echo $ligne["pers_id"]; ?>";
		tableaudonnees[<?php echo $i; ?>][1] = "<?php echo $ligne["pers_nom"]; ?>";
		tableaudonnees[<?php echo $i; ?>][2] = "<?php echo $ligne["pers_prenom"]; ?>";
		// autres lignes récupérés de la BDD
 
		<?php
                $i++;
        }?>
		creerTableau("liste");
	</script>

• Création des input qui va trier la liste a chaque saisie :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<TD class=listecontenu align="center"><input class="forminput" type="text" name="fNom" onkeyup="selectionTableau(this.value,1);" size="10" value=""></TD>
<TD class=listecontenu align="center"><input class="forminput" type="text" name="fPrenom" onkeyup="selectionTableau(this.value,2);" size="10" value=""></TD>
<!-- Autres input -->

Voilà pour le code! Maintenant j'explique :
Au chargement de la page, tableaudonnees (une variable JS de type tableau à 2 dimensions (premier indice : personnes, second indice : champs des personnes) est rempli par PHP. Une fois que le tableau a été créé, la fonction JS creerTableau("liste") (où "liste" est un tableau HTML qui contient les input dans le <THEAD>) va générer un tableau sous forme HTML (on va créé un <TBODY> et le remplir par le DOM).

Lorsque l'utilisateur saisit un texte dans un des <input>, on appelle la fonction selectionTableau(this.value,1) (this.value est la valeur saisie, et 1 est l'indice correspondant à la colonne de tableaudonnees dont on recherche la valeur) qui va parcourir tout le tableau tableaudonnees et va afficher ou cacher les lignes du tableau HTML.

On fait passer un tableau pour la recherche car c'est utile pour pouvoir trier plusieurs champs.

A noter que pour l'instant c'est valable pour des tableau jusqu'à 15 colonnes (à voir si on peut faire plus) et que ça marche bien sous IE7 et FireFox. J'ai également essayé de faire ça de manière "générique" pour que ça puisse être utilisé sur n'importe quel formulaire de liste.

Qu'en pensez-vous ?
Est-ce que ça existe déjà et que je ré-invente la roue ?
Est-ce plus judicieux que JS trie les données au lieu de PHP ? (sans AJAX)

Merci et bonne journée !

[SpaceFrog]

le tri coté serveur est bien plus efficace et les possibilités de tri multi-critères bien plus faciles à traiter en mysql qu'en javascript.

Il y a quelques posts dans les contrinutuons ou la FAQ sur les tri de tableaux de dimensions multiples.

Mais si tu utilises ajax et php mysql, mon conseil serait de rester sur el tri coté serveur. à la limite même sans ajax en jouant un peu avec le cache

[madevilts]

+1.

De plus, suivant la quantité de données, le tri coté serveur sera bien plus performant qu'un tri javascript. Et bien entendu, si tu fais tout coté client, s'il y a un nouvel enregistrement, tu ne le sauras pas vu qu'il ne sera pas chargé.

[grenoult]

En effet je viens de voir que le tri (croissant/décroissant) étant bien galère à faire en JS et risquait de faire ralentir le client.

Je me redirige vers l'Ajax alors

Merci !