Canalblog
Editer l'article Suivre ce blog Administration + Créer mon blog
Publicité
Dreamgratuit - Philosophie
22 février 2009

Tri dynamique via les intitulés de colonnes d'un tableau de données – Part 2 Dreamweaver PHP/MySQL

Désolée pour le retard de cette deuxième partie du tuto !

Nous allons y voir comment installer les petites flèches qui permettent à l'utilisateur d'afficher l'ordre des résultats à sa guise.

Mettez-vous en mode code et repérer l'intitulé des colonnes qui vont permettre le tri. Dans mon cas :

<th>Auteur</th>
<th>Editeur</th>


Nous allons insérer dans ces colonnes les images des petites flèches permettant le tri. Le plus simple est de se remettre en mode création et insérer vos images. Le code devient dans mon cas :

<th>Auteur&nbsp;<img src="../images/fleche_h.png" width="11" height="11" border="0" />&nbsp;<img src="../images/fleche_b.png " width="11" height="11" border="0" />
</th>
<th>Editeur&nbsp;<img src="../images/fleche_h.png" width="11" height="11" border="0" />&nbsp; <img src="../images/fleche_b.png " width="11" height="11" border="0" />      </th>


Il faut maintenant insérer le code suivant (en l'occurrence le paramètre d'affichage de ma page est ici auteur mais ceci peut être n'importe quel paramètre permettant l'affichage de la page contenant ce tableau) :

<th> Auteur&nbsp;<a href="<?php $_SERVER['PHP_SELF'] ?>?auteur=<?php echo $_GET['auteur']; ?>&tri=auteur&dir=ASC"><img src="../images/fleche_h.png" width="11" height="11" border="0" /></a>&nbsp;<a href="<?php $_SERVER['PHP_SELF'] ?>?auteur=<?php echo $_GET['auteur']; ?>&tri=auteur&dir=DESC"><img src="../images/fleche_b.png" width="11" height="11" border="0" /></a>&nbsp;</a></th>
<th>Editeur&nbsp;<a href="<?php $_SERVER['PHP_SELF'] ?>?auteur=<?php echo $_GET['auteur']; ?>&tri=editeur&dir=ASC"><img src="../images/fleche_h.png" width="11" height="11" border="0" /></a>&nbsp;<a href="<?php $_SERVER['PHP_SELF'] ?>?auteur=<?php echo $_GET['auteur']; ?>&tri=editeur&dir=DESC"><img src="../images/fleche_b.png" width="11" height="11" border="0" /></a></th>


Voilà ! C'est fait… Il n'y a plus qu'à tester.

Publicité
Commentaires
Archives
Publicité
Publicité