Tri dynamique d'un tableau html

Commenter

Contenu du snippet

Ce code permet de récupérer un tableau HTML et de le trier sans avoir à recharger la page. On peut rajouter des lignes de données à ce tableau sans que le script en soit modifié.

Source / Exemple : 


<HTML>
<HEAD>
<title>Morne Plaine. Le classement.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
// Variable qui permet de conserver la trace de la colonne et de l'ordre en fonction
// desquels le tableau est trié.
var dernier_tri = -2;

// Permet de tester si une chaine de caractères est une date au format JJ.MM.AAAA
// ------------------------------------------------------------------------------
function TestDate(chaine) {
   if (chaine.length < 10){return false};
   var jour = chaine.substring(0,2);
   var mois = chaine.substring(3,5);
   var annee = chaine.substring(6);
   jour = parseInt(jour);
   mois = parseInt(mois)-1;
   annee = parseInt(annee);
   var rDate = new Date(annee,mois,jour,0,0);
   if(rDate.toString() == "NaN"){return false};
   return true;
}

// Permet de convertir une date du format JJ.MM.AAAA en un entier AAAAMMJ
// ----------------------------------------------------------------------
function ConvDate(chaine){
   var jour = chaine.substring(0,2)
   var mois = chaine.substring(3,5)
   var annee = chaine.substring(6)
   var intdate = parseInt(annee + mois + jour);
   return(intdate)
}

// Permet de tester si une chaine de caractères est un entier
// ----------------------------------------------------------
function TestEntier(chaine){
   if(isNaN(chaine))
       {return false;}
   else
       {return true}
}

// Fonctions "critères" de tri pour le tableau javascript
// ------------------------------------------------------

// Tri croissant en fonction d'une colonne date
function EvalOrdreCroissantDate(x1,x2) {
   return (ConvDate(x1[indice_glob]) < ConvDate(x2[indice_glob]))? -1 : 1;
}

// Tri décroissant en fonction d'une colonne date
function EvalOrdreDecroissantDate(x1,x2) {
   return (ConvDate(x1[indice_glob]) > ConvDate(x2[indice_glob]))? -1 : 1;
}

// Tri croissant en fonction d'une colonne numérique
function EvalOrdreCroissantNum(x1,x2) {
   return (parseInt(x1[indice_glob]) < parseInt(x2[indice_glob]))? -1 : 1;
}

// Tri décroissant en fonction d'une colonne numérique
function EvalOrdreDecroissantNum(x1,x2) {
   return (parseInt(x1[indice_glob]) > parseInt(x2[indice_glob]))? -1 : 1;
}

// Tri croissant en fonction d'une colonne texte
function EvalOrdreCroissantTxt(x1,x2) {
   return (x1[indice_glob].toLowerCase() < x2[indice_glob].toLowerCase())? -1 : 1;
}

// Tri décroissant en fonction d'une colonne texte
function EvalOrdreDecroissantTxt(x1,x2) {
   return (x1[indice_glob].toLowerCase() > x2[indice_glob].toLowerCase())? -1 : 1;
}

// Fonctions qui trie un tableau javascript
// ------------------------------------------------------
function Trie_tableau_js(tab_js,indice,sens) {
   var nb_ligne = tab_js.length;
   var nb_colonne = tab_js[0].length;
   var Nom_Fct_Eval = null;
   indice_glob = indice; // on récupère l'indice de la colonne sélectionnée
                         // et on le passe en variable globale pouvant être
                         // utilisée par la suite par toutes les fonctions
                         // "critères" de tri.
   // Dans la suite, en fonction du sens de tri et de la nature de la colonne
   // en fonction de laquelle on trie, on détermine le nom de la fonction "critère"
   // utilisé.
   if (sens>0) {
      if (TestDate(tab_js[0][indice])) { // si c'est une date
         Nom_Fct_Eval = EvalOrdreCroissantDate
      }
      else {  // si ce n'est pas une date
           if (TestEntier(tab_js[0][indice])) {
              Nom_Fct_Eval = EvalOrdreCroissantNum
           }
           else { // si ce n'est ni une date ni un nombre, c'est une chaine de caractères
              Nom_Fct_Eval = EvalOrdreCroissantTxt
           }
      }
   }
   else {
      if (TestDate(tab_js[0][indice])) {
         Nom_Fct_Eval = EvalOrdreDecroissantDate
      }
      else {
           if (TestEntier(tab_js[0][indice])) {
              Nom_Fct_Eval = EvalOrdreDecroissantNum
           }
           else {
              Nom_Fct_Eval = EvalOrdreDecroissantTxt
           }
      }
   }
  // On trie le tableau javascript grâce à la méthode .sort et au critère retenu.
  tab_js.sort(Nom_Fct_Eval);
  return tab_js;
}

function RangeTableau(indice_tri){ // 1: Croissant, -1: Décroissant
//On détermine le tableau à trier.
   var tableau_document = document.getElementsByTagName("TABLE")[0];
   var tableau_javasc = new Array()
   for (i=0; i<tableau_document.rows.length-2; i++){
       tableau_javasc[i] = new Array();
       }

// On détermine l'indice de la colonne considérée
   var indice_colonne = Math.abs(indice_tri);

// On vérifie que le tableau ne soit pas déjà trié comme demandé
   if (dernier_tri==indice_colonne*indice_tri) {return}

// On copie le contenu du tableau HTML dans un tableau javascript
// (on ne récupère pas les 2 premières lignes d'entête ni la 1ère colonne 
// (qui correspond au numéro) parce que ces données n'interviennent pas dans 
// le tri (ce qui explique les length-1 ou -2 et les j+1 i+2)
   for (j=0; j<tableau_document.rows[0].cells.length-1; j++){
       for (i=0; i<tableau_document.rows.length-2; i++) {
           tableau_javasc[i][j] = tableau_document.rows[i+2].cells[j+1].innerText;
       }
   }

// On trie le tableau suivant le sens voulu et la colonne considérée
   tableau_javasc=Trie_tableau_js(tableau_javasc,indice_colonne-1,indice_tri);
   
// On met à jour le tableau HTML
   tableau_document.style.fontFamily="Arial, Helvetica, sans-serif";
   tableau_document.style.fontSize="10";
      for (i=0; i<tableau_document.rows.length-2; i++){
       for (j=0; j<tableau_document.rows[0].cells.length-1; j++){
           tableau_document.rows[i+2].cells[j+1].innerText=tableau_javasc[i][j];
       }
   }

// On renseigne la variable globale définissant le dernier tri effectué
   dernier_tri=indice_tri
}
//-->
</script>
</HEAD>
<BODY>
<TABLE width="510" align="center" cellspacing="0" cellpadding="2" border="0">
<TR bgcolor="#C4CAD0">
<TD width="10" align="center" valign="middle" height="13">N°</TD>
<TD width="100" align="center" valign="middle" height="13">Nom</TD>
<TD width="100" align="center" valign="middle" height="13">Classement ELO</TD>
<TD width="100" align="center" valign="middle" height="13">Nbre de Parties finies</TD>
<TD width="100" align="center" valign="middle" height="13">Date de la dernière entrée du joueur</TD>
</TR>
<TR bgcolor="#C4CAD0">
<TD width="10" align="center" valign="middle" height="13"></TD>
<TD width="100" align="center" valign="middle" height="13"><img src="haut.gif" border="0" alt="Décroissant" onclick="RangeTableau(-1)"><img src="bas.gif" border="0" alt="Croissant" onclick="RangeTableau(1)"></TD>
<TD width="100" align="center" valign="middle" height="13"><img src="haut.gif" border="0" alt="Décroissant" onclick="RangeTableau(-2)"><img src="bas.gif" border="0" alt="Croissant" onclick="RangeTableau(2)"></TD>
<TD width="100" align="center" valign="middle" height="13"><img src="haut.gif" border="0" alt="Décroissant" onclick="RangeTableau(-3)"><img src="bas.gif" border="0" alt="Croissant" onclick="RangeTableau(3)"></TD>
<TD width="100" align="center" valign="middle" height="13"><img src="haut.gif" border="0" alt="Décroissant" onclick="RangeTableau(-4)"><img src="bas.gif" border="0" alt="Croissant" onclick="RangeTableau(4)"></TD>
</TR>
<TR BGCOLOR=#EEEEEE><TD>1</TD><TD>robert</TD><TD>1200</TD><TD>20</TD><TD>20.01.2005</TD></TR>
<TR BGCOLOR=#EEEEEE><TD>2</TD><TD>Jacqueline</TD><TD>150</TD><TD>10</TD><TD>10.01.2005</TD></TR>
<TR BGCOLOR=#EEEEEE><TD>3</TD><TD>Raymond</TD><TD>2000</TD><TD>7</TD><TD>17.01.2005</TD></TR>
<TR BGCOLOR=#EEEEEE><TD>4</TD><TD>léonie</TD><TD>1300</TD><TD>5</TD><TD>15.05.2005</TD></TR>
</TABLE>
</BODY>
</HTML>
</DIV></DIV>

Conclusion :


Ce code est une compilation de bonnes idées glânées sur différents forum javascript. Merci à tous les gens qui ont indirectement contribué à sa création...

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.