Traitement de l'affichage chez le client.
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 :
(explications plus bas)
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
| /* 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:
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:
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 !
