Trier un tableau selon un ordre choisit par l'utilisateur

koufi -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention - 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.

Afficher la suite

A voir également:

Trier un tableau selon un ordre choisit par l'utilisateur
Excel trier par ordre croissant chiffre - Guide
Tableau word - Guide
Tableau ascii - Guide
Imprimer un tableau excel - Guide
Comment faire un tableau croisé dynamique - Guide

4 réponses

Réponse 1 / 4

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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

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 Statut Membre Dernière intervention 2

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

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

koufi

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 Statut Membre Dernière intervention 2

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

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 Statut Membre Dernière intervention 2

... 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

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

Comment classer des noms par ordre alphabétique dans un tableau?

Trier un tableau en ordre alphabétique

liste de noms par ordre alphabétique

Excel, classer par ordre alphabétique ?

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

Votre réponse

Discussions similaires