CodeS-SourceS est hébergé par Frontier.fr

Cliquez ici pour mettre ce site au démarrage de votre navigateur

AccueilCodesTutorielsForumsEmploiLivresConnexion

begin process at 2009 01 09 21:56:18

[TIPS] EVITER LE DOUBLE CLICK SUR UN POSTBACK par Luke77

STYLECOP ET FXCOP par Mona7170

QUESTION SQL SERVER POUR LES EXPERTS par RaptorXP

[OPEN XML] LES LIENS ET LES TWITTERS DE LA SEMAINE 05/01/2009 par neodante

[WPF] COMMENT ASSIGNER UNE RESSOURCE DYNAMIQUE DEPUIS LE CODE-BEHIND ? par Thomas LEBRUN

REPONSE : RéSOLUTION D'éCRAN par alaindu_33

RE : PROBLèME POUR CHANGER LE DOCUMENT.BGCOLOR DANS IE par scratchdesign

RE : MAITRISE D'UN COPIER/COLLER DANS UNE IFRAME par LHUZ

PROBLèME POUR CHANGER LE DOCUMENT.BGCOLOR DANS IE par scratchdesign

RE : MAITRISE D'UN COPIER/COLLER DANS UNE IFRAME par Bul3

+ de logiciels à télécharger

1 331 232 membres
661 nouveaux aujourd'hui
14 644 membres club

Trouver une ressource

Trouvez une ressource parmi 39 265 codes, 1 223 640 messages d'aide etc...

Recherche: dans [ Dernières recherches ]

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

TRI DYNAMIQUE D'UN TABLEAU HTML

Information sur la source

Catégorie :Formulaire Niveau : Débutant Date de création : 27/01/2005 Date de mise à jour : 28/01/2005 20:11:16 Vu : 8 939

Auteur : Skullface

Ecrire un message privé

Note :

7,33 / 10

Commentaire sur cette source (8)

Ajouter un commentaire et/ou une note

Description

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

<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>

<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...

Historique

27 janvier 2005 00:56:54 :: RAS (juste ajout commentaire)
27 janvier 2005 00:59:05 :: Encore une modif de commentaire...
28 janvier 2005 19:58:20 :: Ajout de commentaires.
28 janvier 2005 20:11:16 :: Ajout de commentaires.

Sources de la même categorie

VÉRIFICATION DU NUMÉRO DE TVA INTRACOMMUNAUTAIRE D'UNE SOCIÉ... par vilfarfadet

OBLIGER UN UTILISATEUR DE COCHER UNE CHECKBOX POUR VALIDER U... par yoyo17560

UPLOAD PLUSIEURS FICHIERS FANCYUPLOAD V2 par mnouzahir

ESTIMATION DU DEGRÉ DE CONFIANCE À ACCORDER À UN MOT DE PASS... par vilfarfadet

SLIDER (CURSEUR VARIABLE) ÉLÉMENT JAVASCRIPT par kgilbert

Toutes les sources de la catégorie Formulaire

Commentaires et avis

Commentaire de Skullface le 27/01/2005 01:02:37

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 !

Commentaire de coucou747 le 27/01/2005 21:30:48

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...

Commentaire de Skullface le 28/01/2005 19:59:29

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 ?

Commentaire de zuff le 31/01/2005 11:01:24

Pour FireFox :
remplace innerText par innerHTML.

Commentaire de aredius le 02/02/2005 16:47:40

bonjour,
dommage que pour autant de code, il ne soit pas possible de le télécharger.

Commentaire de berticoyote le 13/03/2006 19:30:46

Un grand merci pour ce code.
Certes je ne suis pas encore assez calé pour me permettre des remarques sur le Javascript. Mais il est tout de même extrêmement simple d'utilisation et efficace !!
Bravo...je cherchais depuis longtemps quelque chose de pas trop "sioux", ben c'est fait !! merci !!

Commentaire de Jcbubu le 03/09/2007 18:43:57

Bonjour et merci pour cet exemple bien expliqué : je m'en suis servi pour un tri dans un tableau, MAIS :
- si sous IE tout fonctionne comme il faut, sous Firefox j'ai des soucis : les clics sur les flèches (qui d'ailleurs sont inversées ^^ il faut que je les change) ne fonctionnent correctement que sur la 2e colonne et pas la 1e : j'ai eu beau chercher une éventuelle erreur de code, je n'ai pas trouvé : helllp
- si dans une page il y a plusieurs tableaux, comment choisir celui que l'on veut trier ? et peut-on trier plusieurs tableaux ?
Merci d'avance - signé : la lose informatique
PS : la page : http://www.synergie-sante.net/html/annu/annuretr.html

Commentaire de Jcbubu le 04/09/2007 23:38:36

J'ai trouvé !!! (du moins je crois)
J'ai constaté que les caractères alphanumériques n'étaient pas traités s'ils étaient de grande taille : j'ai modifié la ligne 14 : if (chaine.length < 10){return false};
en if (chaine.length < 30){return false};
et plus de problème...
Mais si on pouvait m'expliquer ... J'ai essayé un autre tri : (http://www.javascriptfr.com/codes/TRI-TABLEAU-HTML_16366.aspx) : il y a le même problème, réglé pareil