Tri dynamique d'un tableau html

Soyez le premier à donner votre avis sur cette source.

Snippet vu 18 476 fois - Téléchargée 32 fois

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

Ajouter un commentaire

Commentaires

cs_Skullface
Messages postés
9
Date d'inscription
lundi 24 janvier 2005
Statut
Membre
Dernière intervention
30 janvier 2005
-
Ce script a été testé avec un tableau de plus de 600 lignes sur 7 colonnes et fonctionne en un temps raisonnable (3 secondes sur mon ordi). Si quelqu'un voit comment améliorer la chose (la boucle de copie du tableau est longue...), je suis preneur !
coucou747
Messages postés
12336
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
29 -
j'ai pas testé ton code, mais on peut faire plusieurs remarques :

tab.qsort(); ou tab.sort(); je sais plus...

est une fonction js qui trie un tableau...

ensuite bah essai de mettre des commentaires car les jours de migraines, c'est vraiment utile...
cs_Skullface
Messages postés
9
Date d'inscription
lundi 24 janvier 2005
Statut
Membre
Dernière intervention
30 janvier 2005
-
Voilà, c'est fait !
Par contre, j'ai un pb : rien ne se passe avec Firefox... as-tu une idée du pkoi ?
Est-ce la fonction .sort qui n'est pas connue ?
zuff
Messages postés
79
Date d'inscription
lundi 28 octobre 2002
Statut
Membre
Dernière intervention
21 octobre 2008
-
Pour FireFox :
remplace innerText par innerHTML.
cs_aredius
Messages postés
1
Date d'inscription
mercredi 6 octobre 2004
Statut
Membre
Dernière intervention
2 février 2005
-
bonjour,
dommage que pour autant de code, il ne soit pas possible de le télécharger.

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.