Tri dynamique d'un tableau en php/javascript

Fermé
Badou - 13 avril 2005 à 11:30
 Harold - 8 févr. 2009 à 21:24
Bonjour,

j'affiche un tableau HTML à deux dimensions, et je voudrais pouvoir, en cliquant sur l'en-tête d'une colonne, retrier automatiquement le tableau selon cette colonne, mais sans recharger la page (j'ai des zones de saisie sur la page, donc je ne veux pas les écraser).

J'ai trouvé une procédure javascript, mais pas commentée du tout et je n'y comprends rien.
Pourriez-vous m'aider ?
Merci !! :-)

Badou
A voir également:

2 réponses

kij_82 Messages postés 4088 Date d'inscription jeudi 7 avril 2005 Statut Contributeur Dernière intervention 30 septembre 2013 857
13 avril 2005 à 11:33
Et c'est quoi cette procédure, tu peux la mettre stp ?

++
0
Bonjour,
la procédure c'est ce qui suit... merci :-)

function trier(tableau,colonnes,sens) //######## trier un tableau htm ########
//##############################################################################
// <script type="text/javascript" src="trier.js"></script>
// appel : trier(tableau à trier,colonnes,sens);
// colonnes : n° [,type[:taille]][;n°[,type[:taille]]...]
// Type actuellement possibles ( C par défaut )
// c Caractères
// jj/mm/aaaa Date jj/mm/aaaa
// jjmmaaaa Date jjmmaaaa
// e:taille Entier:nbr caractères maxi
//##############################################################################
{ var ligfin=tableau.rows.length; // nbr lignes
var TabCol=colonnes.split(";"); // format : n°,type:taille;n°;...n°
var buffer=Array(ligfin); // buffer[nbr lignes]

for ( var l=0; l<ligfin; l++ )
{ var colfin=tableau.rows[l].cells.length; // nbr colonnes
buffer[l]=new Array(colfin+1); // buffer[lignes][colonnes +1]
buffer[l][0]=""; // buffer[ligne][0]=critères de tri

for ( var t=0; t<TabCol.length; t++ )
{ var Prm=TabCol[t].split(","); // Prm[0]=n° colonne
if (!Prm[1]) Prm[1]="c"; // Prm[1]=type
var Zone=tableau.rows[l].cells[Prm[0]].innerHTML;
Prm=Prm[1].split(":"); // Prm[0]=type, Prm[1]=taille

switch (Prm[0].toLowerCase()) {

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~
case "e": //~~~~ Entiers ~~~~
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~
while ( Zone.length<Number(Prm[1]) ) // adapter la
{ Zone="0"+Zone; } // longueur
break;

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
case "jjmmaaaa": //~~~~ format date ~~~~
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Zone=Zone.substr(4,4) +
Zone.substr(2,2) +
Zone.substr(0,2); // mise en forme aaaammjj
break;

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
case "jj/mm/aaaa": //~~~~ format date ~~~~
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Zone=Zone.substr(6,4) +
Zone.substr(3,2) +
Zone.substr(0,2); // mise en forme aaaammjj
break;

/*===========================================\
! je n'ai mis ici que quelques possibilités. !
! on peut ajouter : !
! !
! case "type de zone": !
! ... traitements adaptés ... !
! break; !
! !
\===========================================*/

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
default: //~~~~ par défaut ~~~~
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
case "c": //~~~~ caractères ~~~~
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
break; }

buffer[l][0]+=Zone; }

for ( var c=0;c<colfin;c++ ) // mémoriser contenu [lignes][colonnes]
{ buffer[l][c+1]=tableau.rows[l].cells[c].innerHTML; } }

buffer.sort(); // trier

if (sens.charAt(0).toLowerCase()!="a") // inversion si non= A[scendant]
{ buffer.reverse(); }

for ( l=0;l<ligfin;l++ ) // "recharger" le tableau htm
{ for ( c=1;c<=colfin;c++ )
{ tableau.rows[l].cells[c-1].innerHTML=buffer[l][c]; } } }

//##############################################################################
0
gat_ Messages postés 5 Date d'inscription mardi 6 mars 2007 Statut Membre Dernière intervention 18 juillet 2007
7 mai 2007 à 14:03
Bonjour,

Pour trier ton tableau cote client (c'est a dire en JavaScript) tu peux regarder cette article:

http://ww11.vmeste.fr/index.php?2007/05/06/123-classer-un-tableau-cote-client-aisement

Gaetan
0
Bonjour à tous,

Mon but : trier mon tableau qui liste des fichiers par date de modification, dans l'idéal sans avoir à cliquer sur un bouton (ou en-tête).

J'utilise script de QuentinC : http://quentinc.net/
Mais ce dernier ne fonctionne plus avec tous les ajouts qu'il y a eu !

J'espère que vous pourrez m'aider ! Merci d'avance...
Harold


Voici le code, je sais qu'il n'est pas clean :-/
<table width="640" align="center" cellpadding="2" cellspacing="0" style="font-size:10px;">
        <thead>
        <tr>
          <th align="left" valign="middle" bgcolor="#D5E1F9" style="vertical-align:middle; border:0.1em; border-color:#b8bbbf; border-style:dotted; border-right-style:none;">
          <a href="#" onclick="sortTable(this,0); return false;">
          <span class="Style3">File<span class="Style2"> (click on the size to download)</span></span></a></th>
          <th width="65" align="center" valign="middle" bgcolor="#D5E1F9" style="height:16px; vertical-align:middle; border:0.1em; border-color:#b8bbbf; border-style:dotted; border-right-style:none; border-left-style:none;"><a href="#" onclick="sortTable(this,1); return false;"><span class="Style3">Size</span></a></th>
          <th width="65" align="center" valign="middle" bgcolor="#D5E1F9" style="height:16px; vertical-align:middle; border:0.1em; border-color:#b8bbbf; border-style:dotted; border-right-style:none; border-left-style:none;"><a href="#" onclick="sortTable(this,1); return false;"><span class="Style3">HD</span></a></th>
          <th width="65" align="center" valign="middle" bgcolor="#D5E1F9" style="height:16px; vertical-align:middle; border:0.1em; border-color:#b8bbbf; border-style:dotted; border-right-style:none; border-left-style:none;"><a href="#" onclick="sortTable(this,1); return false;"><span class="Style3">SD <span class="Style2">PAL</span></span></a></th>
          <th width="65" align="center" valign="middle" bgcolor="#D5E1F9" style="height:16px; vertical-align:middle; border:0.1em; border-color:#b8bbbf; border-style:dotted; border-right-style:none; border-left-style:none;"><a href="#" onclick="sortTable(this,1); return false;"><span class="Style3">SD <span class="Style2">NTSC</span></span></a></th>
        </tr>
                  </thead>
          <tbody>
        <?
	$dossier = opendir ("videos");
	$bad_extensions = array( 'htaccess', 'php', 'swf', 'html');
	if($fichier != "." && $fichier != "..")
		{
			$i = 1;
			while ($fichier = readdir ($dossier))
				{
					if(($i%2)==1)
						{
							$bgcolor="#31628A";
						} else
						{
							$bgcolor="#31628A";											
						}
				if ($fichier != "." && $fichier != "..")
					{
							if(!is_dir($fichier))
								{ 
									$fileinfo=pathinfo($fichier);
									if (!in_array(strtolower($fileinfo["extension"]),$bad_extensions))
										{					
												echo "<tr>\n";
												echo "	<td align='left' style='height:16px; vertical-align:middle; background-color:" . $bgcolor . ";border:0.1em; border-color:#b8bbbf; border-style:dotted; border-top-style:none; border-top-style:none; border-right-style:none;'>\n";
	if(file_exists("videos/" . $fichier . "/preview.flv"))
	  echo "		<a class='liste' style='text-decoration:none;' href='preview.php?video=videos/" . $fichier . "'>" . $fichier . "<span class='Style2'> (click to preview)</span></a>\n";
    else
  	  echo  "". $fichier ."\n" ;

												echo "	</td>\n";
												
												echo "	<td align='right' style='font-size:10px; height:16px; vertical-align:middle; background-color:" . $bgcolor . ";border:0.1em; border-color:#b8bbbf; border-style:dotted; border-top-style:none; border-left-style:none; border-right-style:none;'>&nbsp;\n";
	if(file_exists("videos/" . $fichier . "/video.zip"))
		echo "<a class='liste' style='text-decoration:none;' href='videos/" . $fichier . "/video.zip'>	" . ((filesize("videos/" . $fichier . "/video.zip")-(filesize("videos/" . $fichier . "/video.zip")%1048000))/1048000) . " Mo <img src='habillage/icon/gray/16x16/Download.gif' alt='Download' width='14' height='14' border='0' /></a>\n";
	else
		echo "&nbsp;";
												echo "	</td>\n";

												echo "	<td align='right' style='font-size:10px; vertical-align:middle; background-color:" . $bgcolor . "; border:0.1em; border-color:#b8bbbf; border-style:dotted; border-top-style:none; border-right-style:none; border-top-style:none;'>\n";
	if(file_exists("videos/" . $fichier . "/hd.mov.zip"))
		echo "<a class='liste' style='text-decoration:none;' href='videos/" . $fichier . "/hd.mov.zip'>	" . ((filesize("videos/" . $fichier . "/hd.mov.zip")-(filesize("videos/" . $fichier . "/hd.mov.zip")%1048000))/1048000) . " Mo <img src='habillage/icon/gray/16x16/Download.gif' alt='Download' width='14' height='14' border='0' /></a>\n";
	else
		echo "&nbsp;";
												echo "	</td>\n";
												
												echo "	<td align='right' style='font-size:10px; vertical-align:middle; background-color:" . $bgcolor . "; border:0.1em; border-color:#b8bbbf; border-style:dotted; border-top-style:none; border-right-style:none; border-top-style:none;'>\n";
	if(file_exists("videos/" . $fichier . "/sdpal.mov.zip"))
	  echo "	<a class='liste' style='text-decoration:none;' href='videos/" . $fichier . "/sdpal.mov.zip'>	" . ((filesize("videos/" . $fichier . "/sdpal.mov.zip")-(filesize("videos/" . $fichier . "/sdpal.mov.zip")%1048000))/1048000) . " Mo <img src='habillage/icon/gray/16x16/Download.gif' alt='Download' width='14' height='14' border='0' /></a>\n";
	else
		echo "&nbsp;";
												echo "	</td>\n";

												echo "	<td align='right' style='font-size:10px; height:16px; vertical-align:middle; background-color:" . $bgcolor . ";border:0.1em; border-color:#b8bbbf; border-style:dotted; border-top-style:none; border-top-style:none;'>\n";
	if(file_exists("videos/" . $fichier . "/sdntsc.mov.zip"))
	  echo "	<a class='liste' style='text-decoration:none;' href='videos/" . $fichier . "/sdntsc.mov.zip'>	" . ((filesize("videos/" . $fichier . "/sdntsc.mov.zip")-(filesize("videos/" . $fichier . "/sdntsc.mov.zip")%1048000))/1048000) . " Mo <img src='habillage/icon/gray/16x16/Download.gif' alt='Download' width='14' height='14' border='0' /></a>\n";
	else
		echo "&nbsp;";
												echo "	</td>\n";
												echo "</tr>\n";
										}
								}
					}	
											$i++;
		}
										closedir ($dossier);											
								}
									else
										{
											echo "<tr><td>Erreur de connexion !</td></tr>\n";
										}
								?>


<?
	$dossier = opendir ("files");
	$bad_extensions = array( 'htaccess', 'php', 'swf', 'html');
	if($fichier != "." && $fichier != "..")
		{
			$i = 1;
			while ($fichier = readdir ($dossier))
				{
					if(($i%2)==1)
						{
							$bgcolor="#31628A";
						} else
						{
							$bgcolor="#31628A";											
						}
				if ($fichier != "." && $fichier != "..")
					{
							if(!is_dir($fichier))
								{ 
									$fileinfo=pathinfo($fichier);
									if (!in_array(strtolower($fileinfo["extension"]),$bad_extensions))
										{					
												echo "<tr>\n";
												echo "	<td align='left' style='height:16px; vertical-align:middle; background-color:" . $bgcolor . ";border:0.1em; border-color:#b8bbbf; border-style:dotted; border-top-style:none; border-top-style:none; border-right-style:none;'>\n";
												echo "		<a class='liste' style='text-decoration:none;' href='files/" . $fichier . "'>" . $fichier . "</a>\n";
												echo "	</td>\n";
												echo "	<td align='right' style='font-size:10px; height:16px; vertical-align:middle; background-color:" . $bgcolor . ";border:0.1em; border-color:#b8bbbf; border-style:dotted; border-top-style:none; border-left-style:none; border-right-style:none;'>\n";
												$fs=filesize("files/" . $fichier);
												echo "	<a class='liste' style='text-decoration:none;' href='files/" . $fichier . "'>	" . (($fs-($fs%1048000))/1048000) . " Mo <img src='habillage/icon/gray/16x16/Download.gif' alt='Download' width='14' height='14' border='0' /></a>\n";
												echo "	</td>\n";
												
												echo "	<td align='right' style='vertical-align:middle; background-color:" . $bgcolor . "; border:0.1em; border-color:#b8bbbf; border-style:dotted; border-top-style:none; border-right-style:none; border-top-style:none;'>&nbsp;\n";
												echo "	</td>\n";
												
												echo "	<td align='right' style='vertical-align:middle; background-color:" . $bgcolor . "; border:0.1em; border-color:#b8bbbf; border-style:dotted; border-top-style:none; border-right-style:none; border-top-style:none;'>&nbsp;\n";
												echo "	</td>\n";

												echo "	<td align='left' style='height:16px; vertical-align:middle; background-color:" . $bgcolor . ";border:0.1em; border-color:#b8bbbf; border-style:dotted; border-top-style:none; border-top-style:none;'>&nbsp;\n";
												echo "	</td>\n";

												echo "</tr>\n";
										}
								}
					}	
											$i++;
		}
										closedir ($dossier);											
								}
									else
										{
											echo "<tr><td>Erreur de connexion !</td></tr>\n";
										}
								?>
    
                           </tbody>
      </table>

0