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:

Tri dynamique d'un tableau en php/javascript
Tableau croisé dynamique - Guide
Trier un tableau excel - Guide
Tableau word - Guide
Tableau ascii - Guide
Comment imprimer un tableau excel sur une seule page - Guide

2 réponses

Réponse 1 / 2

kij_82 Messages postés 4089 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 ?

++

Badou
13 avril 2005 à 17:28

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éponse 2 / 2

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

Harold
8 févr. 2009 à 21:24

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>

Discussions similaires

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

Bonjour,
tous les mois je fais des indicateurs sécurité et ce mois ci j'ai un problème : je mets à jour ma base de donnée et ensuite je mets à jour les tableaux croisés dynamiques
celà fonctionne pour presque tous mes tableaux sauf pour 2 où la réponse est la suivante :
impossible d'afficher le rapport de tableau croisé dynamique sur un rapport existant
je n'arrive pas à trouver l'erreur que j'ai pu commetre
merci de votre aide

Nom de champs du tableau croisé dynamique non valide

Bonjour à tous,

Je suis en train d'analyser les réponses reçues à un questionnaire sur Excel en en faisant un tableau croisé dynamique ; seulement, au moment de cliquer sur ok, Excel m'affiche le fameux "le nom du champ du tableau croisé dynamique n'est pas valide. Pour créer un rapport de tableau croisé dynamique, vous devez utiliser les données sous forme de liste avec des étiquettes de colonnes. Si vous changez le nom d'un talbeau croisé dynamique, vous devez taper un nouveau nom pour le champs".

Sauf que j'ai déjà nommé toutes les colonnes, nommé le champs (le tableau entier), enlevé toutes les cases vides (en cherchant sur les forums j'ai constaté qu'en gé...

Bibliothèque

Bonjour,
Je cherche le moyen de rétablir la bibliothèque sur mon écran de windows 10, qui a disparue suite à une mise à jour. Merci d'avance à celui qui peut me donner la solution.

--
Cosjac85