Posez votre question Format imprimable Liste des forums Aidez-les Statistiques Rechercher Charte Forum Webmastering

Tri dynamique d'un tableau en php/javascript

Dernière réponse le 8 fév 2009 à 21:24:04 Badou, le 13 avr 2005 à 11:30:48

Signaler ce message aux modérateurs

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

Meilleures réponses pour « tri dynamique d'un tableau en php/javascript » dans :

PHP/HTML tableau tri dynamique Voir

Tableau PHP en parametre fonction Javascript (Résolu) Voir

Lignes de couleur dans tableau PHP (Résolu) Voir

[php] algorithme de tri de tableau Voir

Xml en tableau php (Résolu) Voir

[html,php,javascript ->form] donner le focus Voir

Javascript - l'objet Array VoirLes particularités de l'objet Array L'objet Array est un objet du noyau Javascript permettant de créer et de manipuler des tableaux. Voici la syntaxe à utiliser pour créer une variable tableau : var x = new Array(element1[, element2, ...]); Si...

Javascript - Les tableaux VoirIntroduction à la notion de tableau Les variables de Javascript ne permettent de stocker qu'une seule donnée à la fois. Or, étant donné qu'il est souvent utile de manipuler de nombreuses données, le concept de variable se révéle parfois...

Bonjour, Pour trier ton tableau cote client (c'est a dire en Lire la suite

Posez votre question Répondre

kij_82, le 13 avr 2005 à 11:33:13

Et c'est quoi cette procédure, tu peux la mettre stp ?

++

Répondre à kij_82

Badou, le 13 avr 2005 à 17:28:11

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]; } } }

//##############################################################################

Répondre à Badou

gat_, le 7 mai 2007 à 14:03:54

Bonjour,

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

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

Gaetan

Répondre à gat_

Harold, le 8 fév 2009 à 21:24:04

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>

Répondre à Harold

Posez votre question Répondre