Trier un tableau selon un ordre choisit par l'utilisateur

Fermé

koufi - 16 févr. 2015 à 11:37
jordane45 Messages postés 38380 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 janvier 2025 - 16 févr. 2015 à 16:15

Bonjour à vous,
Je suis entrain de créer mon application en php5 et j'affiche un tableau dans un onglet. maintenant je veux que selon l'utilisateur pour un clic qu'il puisse trier par ordre croissant la colonne et ou par ordre décroissant. quelqu'un à une idée de comment je pourrais implémenter cela?
Merci d'avance.

A voir également:

Trier un tableau selon un ordre choisit par l'utilisateur
Excel trier par ordre croissant chiffre - Guide
Tableau croisé dynamique - Guide
Comment faire un tableau - Guide
Tableau ascii - Guide
Comment imprimer un tableau excel sur une seule page - Guide

4 réponses

Réponse 1 / 4

jordane45 Messages postés 38380 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 janvier 2025 4 727
16 févr. 2015 à 11:43

Bonjour,

Deux possibilités:
1 - Lors du clic sur un bouton par l'utilisateur, tu fais un SUBMIT de ta page en envoyant comme données ( POST ou GET selon ton choix) une variable contenant l'ordre à prendre en COMPTE.
Ensuite... dans ta requête.. il te suffit d'utiliser le ORDER BY (tavariable) pour que le tri soit ASC ou DESC.

2 - Une autre possibilité est de passer par du javascript.
Ceci évite le rechargement de la page... le traitement se faisant côté client et non plus serveur.
Tu trouveras des plugins tel que TableSorter.js par exemple qui te permet de mettre en place facilement un système de tri sur un tableau HTML.
L'inconvénient de ce système.. est que si tu affiches un "GRAND" nombre de données sur la page.. le tri sera parfois un peu lent à s'afficher....

koufi
16 févr. 2015 à 11:52

Merci jordane45. je vais essayer avec la deuxième possibilité. dois je télécharger ce plugins?

Réponse 2 / 4

kangourouxxx Messages postés 71 Date d'inscription jeudi 31 janvier 2008 Statut Membre Dernière intervention 6 mars 2015 2
16 févr. 2015 à 11:54

jquery + tablesorter et le tour est joué.

Un petit exemple/tuto ici => https://forum.alsacreations.com/topic-20-55876-1-Tri-dynamique-dun-tableau-php.html

bon courage

koufi
16 févr. 2015 à 12:08

Merci beaucoup je vais me documenté avec ce que vous m'avez donné

koufi
16 févr. 2015 à 13:25

Je me suis documenté. j'ai commencé à télécharger les fichiers jquery-latest.js et jquery.tablesorter.js et je les ai enregistrer dans mon répertoire js.
Ensuite j'ai mis le code suivant

<script type="text/javascript" src="../js/jquery-latest.js"></script>
<script type="text/javascript" src="../js/jquery.tablesorter.js"></script>

puis j'ai mis le bout de code ci dessous
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);

ou myTable est l'id de ma table.

Mais j'ai pas la possibilité de trier mon tableau.
y'a t-il quelque chose que j'ai oublier de mettre? merci d'avance

kangourouxxx Messages postés 71 Date d'inscription jeudi 31 janvier 2008 Statut Membre Dernière intervention 6 mars 2015 2
16 févr. 2015 à 13:35

normalement si les scripts sont correctement chargés dans la page tout est automatique il ne reste plus qu'à cliquer sur l'entête du tableau et tout s'ordonne.

Si ce n'est pas le cas, un petit copier/coller du code pour que je puisse reproduire le fonctionnement chez moi.

Réponse 3 / 4

koufi
Modifié par jordane45 le 16/02/2015 à 16:08

Voici mon code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>TITRE</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link href="../css/layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery-latest.js"></script> 
<script type="text/javascript" src="../js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/ajax.js"></script>
<script type="text/javascript" >
$(document).ready(function()  
    {  
        $('#myTable').tablesorter();  
    }  
);  




</script>
</head>
<body id="page1" onload="recherche_structure()">
<div id="main">
<!-- header -->
 <div id="header">
  
     <?php
     $page="accueil";
        include("menu_admin.php");
     ?>
  </div>
 <div id="content" align="center">

     <h3><font align="center" style="font-size:20px;"><B>Récapitulatif des Structures </B></font></h3><br>
    <table class="tableau_recherche" cellspacing="0" align=center>
   <tr>
    
    <td><b>Rechercher Par :</b></td> 
    <td>
     <select name="colonne" id="colonne">
        <option value="nom">Nom </option>
         <option value="regex">Regex </option>
         
     
     </select>
    </td>
    <td>  </td>
    <td><input type="text" id="mot_cle" name="mot_cle" onKeyUp="recherche_structure()"/></td>
   </tr>
 
   </table>
   <br>
   <div id="result">
        

   </div>
     </div> 
</body>
</html>

EDIT : AJOUT DES BALISES DE CODE
Merci de bien vouloir utiliser la coloration syntaxique (les balises de code) lorsque tu postes du code sur le forum.
Explications disponibles ici :
https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code

jordane45 Messages postés 38380 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 janvier 2025 4 727
16 févr. 2015 à 16:13

Bonjour,

1 - Merci de bien vouloir utiliser la coloration syntaxique (les balises de code) lorsque tu postes du code sur le forum.
Explications disponibles ici :
https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code

2 - Charge le JQUERY AVANT les autres plugins !

3 - Ton tableau HTML doit contenir un THEAD et un TBODY pour que le script fonctionne...

=>>> En gros :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>TITRE</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link href="../css/layout.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery-latest.js"></script> 
<script type="text/javascript" src="../js/jquery.tablesorter.js"></script>

<script type="text/javascript" src="../js/ajax.js"></script>

<!-- Init du table sorter -->
<script type="text/javascript" >
$(document).ready(function()  {  
        $('#myTable').tablesorter();  
  } );  

</script>
</head>
<body id="page1" onload="recherche_structure()">
<div id="main">
<!-- header -->
 <div id="header">
  
     <?php
     $page="accueil";
        include("menu_admin.php");
     ?>
  </div>
 <div id="content" align="center">

     <h3><font align="center" style="font-size:20px;"><B>Récapitulatif des Structures </B></font></h3><br>
    <table class="tableau_recherche" cellspacing="0" align=center>
   <tr>
    
    <td><b>Rechercher Par :</b></td> 
    <td>
     <select name="colonne" id="colonne">
        <option value="nom">Nom </option>
        <option value="regex">Regex </option>
     </select>
    </td>
    <td>  </td>
    <td><input type="text" id="mot_cle" name="mot_cle" onKeyUp="recherche_structure()"/></td>
   </tr>
 
   </table>
   <br>
   <div id="result">
        

   </div>
  </div> 
</body>
</html>

NB : Par contre... je ne trouve nul part dans ton code ton tableau : myTable ..... comment le génères tu ? via ton script ajax ??
Si oui... il faut que tu nous le montres... sinon on ne pourra pas t'aider !

jordane45 Messages postés 38380 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 janvier 2025 4 727
16 févr. 2015 à 16:15

Je t'invite également à installer le plugin FIREBUG pour firefox afin de t'aider à deboguer tes programmes....
Et voici quelques tutos :
https://eric-pommereau.developpez.com/tutoriels/outil-web/firebug/#LIV
http://openclassrooms.com/courses/firebug-une-merveille-de-plus-pour-firefox

Réponse 4 / 4

kangourouxxx Messages postés 71 Date d'inscription jeudi 31 janvier 2008 Statut Membre Dernière intervention 6 mars 2015 2
16 févr. 2015 à 16:05

... je ne trouve pas le problème mdr

Bon voici une source ou tout est dispo même les sources :
https://blog.teamtreehouse.com/how-to-code-sortable-tabular-data-with-jquery

il en te reste qu'à DL et adapté, bon courage et tiens nous au courant ;)

koufi
Modifié par koufi le 16/02/2015 à 16:48

Merci je vais regardé cela.
ok
voici la ou j'utilise mytable
désolé de l'utilisation du code j'ai pas encore lu ton lien. Merçi de me faire dire.


<table id="myTable"  class="tableau"> 
	<form action="../../CONTROLEUR/traitement_structure.php" method="post" enctype="multipart/form-data">
        <p>
		  <input type="button"  onclick='document.location.href="ajouterStructure.php"' value="Ajouter une Structure"/>
			</p>
<thead>
	<tr>
		<td>Nom Structure</td>
		<td>Regex</td>
		<td> </td>
	</tr>
</thead>
<tbody>
</table>

Discussions similaires

Tri les lettres d'un mot par ordre alphabétique

Trouver le nom d'un tableau avec sa photo.

Trier un tableau en ordre alphabétique

Bibliothèque

Impossible d'afficher le rapport de tableau croisé dynamique sur un rapport