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

Ce site au démarrage

begin process at 2012 02 14 10:47:38

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 :14 093

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

BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai

RÉSOLUTION D'UN SYSTÈME D'ÉQUATIONS LINÉAIRES À N INCONNUES par william voirol

PLUGIN JQUERY LISTE MODIFIABLE (COMBO) AUTOCOMPLÉTÉE par medkarim

GESTION DE NUMÉRO DE TÉLÉPHONE SIMPLE DANS FIREFOX7 par rotomtom

RECOMMANDER CETTE PAGE AVEC MAILTO, ACCENT ET RETOUR LIGNE D... par weabow

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

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

SLIDE & DéMO TECHDAYS 2012 - FAST & FURIOUS XAML APPS par Vko

XNA IS DEAD! par richardc

TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice

[HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE) par Gio

TECHDAYS PARIS 2012 : CHUCK MORRIS N'A PAS PEUR DES MALWARES, CE SONT LES MALWARES QUI ONT PEUR DE CHUCK MORRIS par ROMELARD Fabrice

Forum

RE : MENU VERTICAL DéROULANT par lordmacrage

RE : REMPLACER UN SOUS CHAINE DANS UNE AUTRE par Renfield

REMPLACER UN SOUS CHAINE DANS UNE AUTRE par stealon

GOOGLE MAP PB ZINDEX MARKER par philou8

RE : AIDE SUR UN SCRIPT?? par NHenry

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

URGENT-Conseil en architecture de site internet-CDC DISPONIBLE-
Budget : 400€
URGENT - Realisation d-un flux standard XML -NewsML- CAHIER DES CHARGES DISPONIBLE
Budget : 400€
Creation de newsletter sur une page Facebook
Budget : 400€

Logiciels

DocTranslate (V3.1.0.0)
DOCTRANSLATE (V3.1.0.0)

DocTranslate est un traducteur de document Microsoft Word, PowerPoint et Excel. Il permet d'autom...

Cliquez pour télécharger DocTranslate
Tribler (2012)
TRIBLER (2012)

Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des...

Cliquez pour télécharger Tribler
OneSwarm (2012)
ONESWARM (2012)

Le peer-to-peer qui protège votre vie privée, c'est OneSwarm. Ce logiciel de peer-to-peer crypté...

Cliquez pour télécharger OneSwarm
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

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

Cliquez pour télécharger Academy System