Tri dynamique d'un tableau en php/javascript
Badou
-
Harold -
Harold -
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
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
2 réponses
-
Et c'est quoi cette procédure, tu peux la mettre stp ?
++-
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]; } } }
//##############################################################################
-
-
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-
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;'> \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 " "; 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 " "; 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 " "; 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 " "; 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;'> \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;'> \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;'> \n"; echo " </td>\n"; echo "</tr>\n"; } } } $i++; } closedir ($dossier); } else { echo "<tr><td>Erreur de connexion !</td></tr>\n"; } ?> </tbody> </table>
-
