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

Ce site au démarrage

begin process at 2010 03 11 06:10:39

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

TRI DYNAMIQUE D'UN TABLEAU HTML

Information sur la source

Note :

7,33 / 10

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

Auteur : Skullface

Ecrire un message privé

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

IMPLEMENTATION DE RANDOM PERSONNALISÉ par ousous

IMPLEMENTATION DE HASHTABLE par ousous

JAVASCRIPT.UTIL.ITERATOR par ousous

PALETTE DE COULEURS par titnome

CALCULS RAYNAUX V2 par Ali Bibi

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

Ajouter un commentaire

Nos sponsors

Derniers Blogs

NDEPEND V3. J'ADORE SON INTéGRATION AVEC VS2010 par tja

XNA 4.0 POUR CRéER DES JEUX 3D SOUS WINDOWS PHONE 7 SERIES par RaptorXP

[TOOLS] NDEPEND 3 DANS VISUAL STUDIO, WAAAAAAAOU!!! par JeremyJeanson

[WF4] GROSSES MéPRISES EN PERSPECTIVE SUR LE KIT DE MIGRATION WF3->WF4 par JeremyJeanson

RéUNION DU CLUB MOSS PARIS par VANNESTE Xavier

Forum

RE : PROBLEME CODE "OBJET ATTENDU" par jdmcreator

RE : REPLACE : JE N'Y ARRIVE PAS ! par kaleidon

RE : REPLACE : JE N'Y ARRIVE PAS ! par PetoleTeam

PB LIGHTBOX JQUERY ET SORTABLE() JQUERY par sebastien_et_typh

RE : PROBLEME CODE "OBJET ATTENDU" par ju0123456789

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

webmaster reseaux sociaux
Budget : 600€
Cherche codeur PHP MYSQL script espace client
Budget : 60€
LOGO ENSEIGNE
Budget : 200€

Logiciels

Axalot, logiciel de sauvegarde de données en ligne (1.10.108.1)
AXALOT, LOGICIEL DE SAUVEGARDE DE DONNéES EN LIGNE (1.10.108.1)

Perdre tout le contenu de votre disque dur, vous imaginez ? Vos photos, vos musiques, votre compt...

Cliquez pour télécharger Axalot, logiciel de sauvegarde de données en ligne
Rigs of Rods (63.3)
RIGS OF RODS (63.3)

c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo...

Cliquez pour télécharger Rigs of Rods
Konvertor (4.00)
KONVERTOR (4.00)

Le logiciel est un gestionnaire multimedia affichant, jouant et convertissant plus de 2000 format...

Cliquez pour télécharger Konvertor
Xlite (v 3.0 build 41150)
XLITE (V 3.0 BUILD 41150)

c'est un logiciel qui permet de téléphoner par Internet à l'aide d'un compte SIP pratique pour le...

Cliquez pour télécharger Xlite
Academy System (10.9.3.0)
ACADEMY SYSTEM (10.9.3.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System