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

Ce site au démarrage

begin process at 2010 02 09 22:36:13

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Divers

> TRI DYNAMIQUE D'UN TABLEAU HTML AVEC RECONNAISSANCE AUTOMATIQUE DES DONNEES

TRI DYNAMIQUE D'UN TABLEAU HTML AVEC RECONNAISSANCE AUTOMATIQUE DES DONNEES

Information sur la source

Note :

9,75 / 10

Catégorie :Divers Niveau :Initié Date de création :05/03/2005 Date de mise à jour :30/05/2005 19:42:28 Vu / téléchargé :18 718 / 1 588

Auteur : larion

Ecrire un message privé

Site perso

Commentaire sur cette source (13)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

Compatible IE/FireFox, ce code trie les tableaux HTML par colonne, très simple à mettre en place.
Le script détecte et trie plusieurs types de données :
- Date : jj/mm/aaaa ou jj-mm-aaaa
- Nombre : (-) (0-9) (.) (0-9) ($£€)
- Chaine de caractères
Voir une démonstration sur http://sortable.pass-x.com/

Source

<HTML>
<STYLE>
#trier { background-color:white; color:black; border-collapse:collapse; BORDER:white 1px solid; FONT:12 Arial; TEXT-ALIGN:center }
#trier TR { background-color:#ffefd5 }
#trier .title { background-color:#bf2b2f; FONT:14 Arial; color:#ffffff; font-weight:bold }
SPAN { FONT:bold 12 Arial; CURSOR:pointer }
BODY { background-color:#FFF5E5 }
#trier TD { BORDER:white 1px solid; }
SPAN { FONT:bold 12 Arial; CURSOR:pointer }
BODY { background-color:#FFF5E5;}
</STYLE>
<SCRIPT>
var index
function sort_int(p1,p2) { return p1[index]-p2[index]; } //fonction pour trier les nombres
function sort_char(p1,p2) { return ((p1[index]>=p2[index])<<1)-1; } //fonction pour trier les strings
function TableOrder(e,Dec) //Dec= 0:Croissant, 1:Décroissant
{ //---- Détermine : oCell(cellule) oTable(table) index(index cellule) -----//
var FntSort = new Array()
if(!e) e=window.event
for(oCell=e.srcElement?e.srcElement:e.target;oCell.tagName!="TD";oCell=oCell.parentNode); //determine la cellule sélectionnée
for(oTable=oCell.parentNode;oTable.tagName!="TABLE";oTable=oTable.parentNode); //determine l'objet table parent
for(index=0;oTable.rows[0].cells[index]!=oCell;index++); //determine l'index de la cellule
//---- Copier Tableau Html dans Table JavaScript ----//
var Table = new Array()
for(r=1;r<oTable.rows.length;r++) Table[r-1] = new Array()
for(c=0;c<oTable.rows[0].cells.length;c++) //Sur toutes les cellules
{ var Type;
objet=oTable.rows[1].cells[c].innerHTML.replace(/<\/?[^>]+>/gi,"")
if(objet.match(/^\d\d[\/-]\d\d[\/-]\d\d\d\d$/)) { FntSort[c]=sort_char; Type=0; } //date jj/mm/aaaa
else if(objet.match(/^[0-9£€$\.\s-]+$/)) { FntSort[c]=sort_int; Type=1; } //nombre, numéraire
else { FntSort[c]=sort_char; Type=2; } //Chaine de caractère
for(r=1;r<oTable.rows.length;r++) //De toutes les rangées
{ objet=oTable.rows[r].cells[c].innerHTML.replace(/<\/?[^>]+>/gi,"")
switch(Type)
{ case 0: Table[r-1][c]=new Date(objet.substring(6),objet.substring(3,5),objet.substring(0,2)); break; //date jj/mm/aaaa
case 1: Table[r-1][c]=parseFloat(objet.replace(/[^0-9.-]/g,'')); break; //nombre
case 2: Table[r-1][c]=objet.toLowerCase(); break; //Chaine de caractère
}
Table[r-1][c+oTable.rows[0].cells.length] = oTable.rows[r].cells[c].innerHTML
}
}
//--- Tri Table ---//
Table.sort(FntSort[index]);
if(Dec) Table.reverse();
//---- Copier Table JavaScript dans Tableau Html ----//
for(c=0;c<oTable.rows[0].cells.length;c++) //Sur toutes les cellules
for(r=1;r<oTable.rows.length;r++) //De toutes les rangées
oTable.rows[r].cells[c].innerHTML=Table[r-1][c+oTable.rows[0].cells.length];
}
</SCRIPT>
<body>
<table id=trier>
<tr class=title>
<td>Nom <span onclick=TableOrder(event,1)>▼</span><span onclick=TableOrder(event,0)>▲</span></td>
<td>Modifié le <span onclick=TableOrder(event,1)>▼</span><span onclick=TableOrder(event,0)>▲</span></td>
<td>Nb <span onclick=TableOrder(event,1)>▼</span><span onclick=TableOrder(event,0)>▲</span></td>
<td>Prix <span onclick=TableOrder(event,1)>▼</span><span onclick=TableOrder(event,0)>▲</span></td>
</tr>
<tr><td>un </td><td>20/03/2005</td><td>12</td><td id=money>$12 </td></tr>
<tr><td>deux </td><td>22/02/2005</td><td> 2</td><td id=money>1.2€</td></tr>
<tr><td><font color="#FF6600">trois</font></td><td><font color="#FF6600">23/02/2005</font></td><td><font color="#FF6600">25</font></td><td id=money><font color="#FF6600">£5.7</font></td> </tr>
<tr><td>quatre</td><td>23/05/2005</td><td>-4</td><td id=money>£1.3</td></tr>
<tr><td>cinq </td><td>23/02/2006</td><td>16</td><td id=money>5.20</td></tr>
</table>
</body>
</html>

<HTML>

<STYLE>
#trier { background-color:white; color:black; border-collapse:collapse; BORDER:white 1px solid; FONT:12 Arial; TEXT-ALIGN:center }
#trier TR { background-color:#ffefd5 }
#trier .title { background-color:#bf2b2f; FONT:14 Arial; color:#ffffff; font-weight:bold }
SPAN { FONT:bold 12 Arial; CURSOR:pointer }
BODY { background-color:#FFF5E5 }
#trier TD { BORDER:white 1px solid; }
SPAN { FONT:bold 12 Arial; CURSOR:pointer }
BODY { background-color:#FFF5E5;}
</STYLE>

<SCRIPT>
var index
function  sort_int(p1,p2) { return p1[index]-p2[index]; }			//fonction pour trier les nombres
function sort_char(p1,p2) { return ((p1[index]>=p2[index])<<1)-1; }	//fonction pour trier les strings

function TableOrder(e,Dec)  //Dec= 0:Croissant, 1:Décroissant
{ //---- Détermine : oCell(cellule) oTable(table) index(index cellule) -----//
	var FntSort = new Array()
	if(!e) e=window.event
	for(oCell=e.srcElement?e.srcElement:e.target;oCell.tagName!="TD";oCell=oCell.parentNode);	//determine la cellule sélectionnée
	for(oTable=oCell.parentNode;oTable.tagName!="TABLE";oTable=oTable.parentNode);				//determine l'objet table parent
	for(index=0;oTable.rows[0].cells[index]!=oCell;index++);									//determine l'index de la cellule

 //---- Copier Tableau Html dans Table JavaScript ----//
	var Table = new Array()
	for(r=1;r<oTable.rows.length;r++) Table[r-1] = new Array()

	for(c=0;c<oTable.rows[0].cells.length;c++)	//Sur toutes les cellules
	{	var Type;
		objet=oTable.rows[1].cells[c].innerHTML.replace(/<\/?[^>]+>/gi,"")
		if(objet.match(/^\d\d[\/-]\d\d[\/-]\d\d\d\d$/)) { FntSort[c]=sort_char; Type=0; } //date jj/mm/aaaa
		else if(objet.match(/^[0-9£€$\.\s-]+$/))		{ FntSort[c]=sort_int;  Type=1; } //nombre, numéraire
		else											{ FntSort[c]=sort_char; Type=2; } //Chaine de caractère

		for(r=1;r<oTable.rows.length;r++)		//De toutes les rangées
		{	objet=oTable.rows[r].cells[c].innerHTML.replace(/<\/?[^>]+>/gi,"")
			switch(Type)		
			{	case 0: Table[r-1][c]=new Date(objet.substring(6),objet.substring(3,5),objet.substring(0,2)); break; //date jj/mm/aaaa
				case 1: Table[r-1][c]=parseFloat(objet.replace(/[^0-9.-]/g,'')); break; //nombre
				case 2: Table[r-1][c]=objet.toLowerCase(); break; //Chaine de caractère
			}
			Table[r-1][c+oTable.rows[0].cells.length] = oTable.rows[r].cells[c].innerHTML
		}
	}

 //--- Tri Table ---//
	Table.sort(FntSort[index]);
	if(Dec) Table.reverse();

 //---- Copier Table JavaScript dans Tableau Html ----//
	for(c=0;c<oTable.rows[0].cells.length;c++)	//Sur toutes les cellules
		for(r=1;r<oTable.rows.length;r++)		//De toutes les rangées 
			oTable.rows[r].cells[c].innerHTML=Table[r-1][c+oTable.rows[0].cells.length];  
}
</SCRIPT>

<body>    
<table id=trier>
	<tr class=title>
		<td>Nom 		<span onclick=TableOrder(event,1)>&#9660;</span><span onclick=TableOrder(event,0)>&#9650;</span></td>
		<td>Modifié le	<span onclick=TableOrder(event,1)>&#9660;</span><span onclick=TableOrder(event,0)>&#9650;</span></td>
		<td>Nb			<span onclick=TableOrder(event,1)>&#9660;</span><span onclick=TableOrder(event,0)>&#9650;</span></td>
		<td>Prix		<span onclick=TableOrder(event,1)>&#9660;</span><span onclick=TableOrder(event,0)>&#9650;</span></td>
	</tr>
	<tr><td>un    </td><td>20/03/2005</td><td>12</td><td id=money>$12 </td></tr>
	<tr><td>deux  </td><td>22/02/2005</td><td> 2</td><td id=money>1.2€</td></tr>
	<tr><td><font color="#FF6600">trois</font></td><td><font color="#FF6600">23/02/2005</font></td><td><font color="#FF6600">25</font></td><td id=money><font color="#FF6600">£5.7</font></td>	</tr>
	<tr><td>quatre</td><td>23/05/2005</td><td>-4</td><td id=money>£1.3</td></tr>
	<tr><td>cinq  </td><td>23/02/2006</td><td>16</td><td id=money>5.20</td></tr>
</table>
</body>
</html>

Conclusion

J'ai été attentif sur l'optimisation du code afin qu'il soit rapide d'execution, facile à comprendre et simple à l'intégration.
Cependant je n'ai prêté aucune attention sur le design des flèches de tri afin de ne pas alourdir le code.
Si vous souhaitez obtenir ces améliorations, rendez-vous sur http://sortable.pass-x.com/

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

tableau ancienne version.html 3 522 octets
tableau nouvelle version.html 3 816 octets

Télécharger le zip

Historique

06 avril 2005 18:01:10 :: Ajout d'une capture écran.
23 mai 2005 17:50:18 :
30 mai 2005 19:42:28 :: Nouvelle version : le tri est plus rapide et le script détecte plus de types de données. Le CSS a été modifié afin de modifer le design que du/des tableau(x) à trier.

Sources du même auteur

MENU TOUJOURS A LA MEME POSITION TRES FLUIDE

CHANGER DE THEME ET DE COULEUR

MENU HORIZONTAL DYNAMIQUE AVEC SOUS-MENUS AVEC FONDU

MENU VERTICAL AVEC SOUS-MENUS

MENU HORIZONTAL ET VERTICAL

Toutes les sources de larion

Sources de la même categorie

MOOTABLEAU par Miky76

CALCULER VOTRE IMC par lesnouesremy

CONSOLE DOS par djebbipgm

PLUGIN JQUERY ARTE: AJOUTER DU TEMPS REEL SUR VOS PAGES WEB par arthurobriot

FAIRE UN FILTRE DES VILLES par scropfi01

Toutes les sources de la catégorie Divers

Commentaires et avis

Commentaire de fg85 le 05/03/2005 14:05:37

Si tu arrive refaire le script pour qu'il soit compatible avec le maximum de navigateur, la gloire est à toi ! mdr

----------------------
http://fg.logiciel.free.fr

Commentaire de larion le 05/03/2005 15:31:24

Sous FireFox, le tri fonctionne bien pour les dates et les chiffres.
Mais pour du texte, le tri ne se fait pas très bien. Je ne vois pas pourquoi.

Commentaire de chimelpremier le 10/03/2005 17:41:52

Travail bien fait, tu trouvera peut-être de l'aide pour l'améliorer ici. Pour moi c'est le top :

http://www.kryogenix.org/code/browser/sorttable/

Commentaire de antoine_w le 28/04/2005 03:19:22

Salut, j'aimerais savoir comment faire pour trier automatiquement une colonne...
J'ai un tableau à 4 colonnes... et lorsque la page s'affiche, la première colonne est triée de la même façon que j'y ai entrée les données...et je dois cliquer sur mon icone... [ onclick=TableOrder(event,1) .....] afin de la trier...
J'ai essayer un [ onload=TableOrder(event,1) .....] et ça n'a pas marché.
La raison pourquoi je n'entre pas les donnés en ordres manuellement est que j'en ajoute frequemment.... et je veux les mettre une à la suite de l'autre pour que ce soit plus vite...
Merci de m'aider!

Commentaire de Amarius le 29/09/2005 11:30:58

A antoine_w  :

Tu peux réaliser automatiquement un tri en provoquant un clic sur la cellule via javascript.
le plus simple est d'ajouter un ID sur la zone span que tu veuxc cliquer et ensuite utiliser la commande clic dans le onload du body  :
<body onload="document.getElementById('tstCLK').click();">

et dans la table :
<span id="tstCLK" onclick=TableOrder(event,0)>▲</span></td>

POUR  larion :

j'ai vu sur le site
http://sortable.pass-x.com/
qu'il existe uen version payante (si peu) du code, qu'apporte-t-elle de plus que celle-ci?
Le code source présent sur cette page ici est-il open-source et réutilisable, modifiable, librement pour un site non-commercial?

merci, c'est du bon boulot en tout cas.

Commentaire de larion le 29/09/2005 13:18:31

Bonjour,

Le code source présent sur cette page est libre de droit.

Les différences avec le code payant sont certe minime mais font toute la différence :
- Il suffit d'un simple tableau html. Les flèches et le reste du code sont injectés automatiquement dans le(s) tableau(x) à l'affichage de votre page. Il n'est donc pas utilile comme ici de modifier le code html du tableau.
(Voir "3, Un exemple de tableau Html" sur http://sortable.pass-x.com)
- Zébrer les couleurs du tableau (en automatique).
- Changer la couleur des lignes du tableau au passage de la souris.
- 2 comportements des flèches :
--- une seule flèche visible pour visualiser la colonne triée
--- toute flèche visible mais une de couleur différente pour indiquer la colonne triée

Commentaire de zilx le 13/10/2005 01:17:29

Bonjour,

Ce script est excelent, et je me suis permis d'en faire une adaptation orienté objet qui se trouve ici : http://www.javascriptfr.com/code.aspx?ID=34180

J'ai developpé le script afin que des flèches soient ajoutées automatiquement dans les entêtes ainsi que les évènements correspondants (onClick), ainsi l'écriture des tableaux HTML reste simple (tableau normal sans avoir à ajouter les images (fleches) et les onclick correspondants).

Commentaire de spoker91 le 28/12/2005 04:35:22

y'a t'il un moyen pour que quand il tri un colone et que dans cette colone il y'est des chiffres identique qui mettent un ordre aléatoir pour ces deux chiffre identique ? car la j'ai l'impression qui pioche dans une autre colone pour les trier :s

merci a vous

Commentaire de na_no_net le 18/05/2007 19:01:26

comment on peut trier une colonne qui contient des cases a coche c.a.d lorsqu'on clique sur la flèche les case sélectionner monte en haut et les case désélectionner descendre en bas (par exemple)
Excuse moi pour le dérangement

Commentaire de Orbiplanax le 10/04/2008 11:31:17

Merci beaucoup !!!

Temps de mise en place < 1 minutes.

Parfait

Encore merci !

Commentaire de patrick532 le 06/09/2008 21:22:43

salut,

pour exploitation dans un code PHP, il faut modifier la ligne du "case 1" comme suit:

case 1: Table[r-1][c]=parseFloat(objet.replace(/[^0-9.-]/g,\'\')); break; //nombre

pour ne pas avoir le message d'erreur T_CONSTANT_ENCAPSED_STRING.
de plus l'ajout de point virgule en fin des lignes "var" est plus propre (bien qu'inutile selon la majorité des navigateurs).
a part ça, ce code est sympa et utile, bravo.
A+
PAtrick532

Commentaire de Teilleul le 10/04/2009 12:11:16

Bonjour,

Très bon script.
Je voudrais rajouter le tri des numéros de téléphone car actuellement une cellule contenant, par exemple, 01.02.03.04.05 est considérée comme un nombre.
J'imagine qu'il faudrait ajouter au test "// nombre ou monnaie" quelque chose comme :
&& (cellContent.match(/\./g)<2)

Cette expression régulière est incorrecte (je ne connais pas bien les expressions régulières). Ce que je cherche à "dire" c'est s'il y a plus de un . ce n'est pas un nombre et çà doit être traité comme une chaîne.

Une petite aide pour la correction de l'expression régulière, svp...

Autre possibilité : l'envoi de paramètres à sortHTMLTable.js pour "forcer" le type d'une colonne. Ainsi, dans mon cas, je pourrais lui dire : la colonne 3 (N° de téléphone) est 'string'.
L'avantage de cette solution par rapport à la précédente c'est que si l'utilisateur entre un numéro de téléphone sous la forme 01.02.03.04.05 ou 0102030405; le tri fonctionnera dans les deux cas.

Merci par avance de toute aide.

@+
T

Commentaire de Teilleul le 10/04/2009 14:09:32

En attendant, j'ai remplacé :
// nombre ou monnaie
} else if (cellContent.match(/^[0-9$£fF\.\s-]+$/))

Par :
// nombre ou monnaie
} else if ((cellContent.match(/^[0-9$£fF\.\s-]+$/)) && ((cellContent.split(".").length-1)<2))

Et les numéros de téléphone, sous la forme 01.02.03.04.05, sont maintenant triés correctement.

@+

T

Ajouter un commentaire

Nos sponsors

Derniers Blogs

[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion

TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice

TECHDAYS PARIS 2010 : DéPLOIEMENT DE NOUVELLES TECHNOLOGIES - RETOUR D'EXPéRIENCE PAR L'INFORMATIQUE DE MICROSOFT par ROMELARD Fabrice

TECHDAYS PARIS 2010 : PLAN DE MIGRATION VERS SHAREPOINT 2010 par ROMELARD Fabrice

TECHDAYS PARIS 2010 : LA PLEINIèRE DU SECOND JOUR par ROMELARD Fabrice

Forum

RE : FONCTION RECHERCHE DATE par Eyeron

FONCTION RECHERCHE DATE par Eyeron

RE : RéCUPERER LA TAILLE D'UN DIV par PetoleTeam

RE : PROTOTYPE: PROBLèME AVEC "EVENT" par PetoleTeam

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

PLATEFORME SUR L ESOTERISME VOYANCE - sans charte graphique
Budget : 3 500€
Joomla 15 module paiement adaptation composant cuisine
Budget : 250€
Integrateur web dans template
Budget : 500€

Logiciels

DB-MAIN (9.1.0)
DB-MAIN (9.1.0)

DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal...

Cliquez pour télécharger DB-MAIN
Xilisoft DPG Convertisseur (5.1.37.0120)
XILISOFT DPG CONVERTISSEUR (5.1.37.0120)

Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé...

Cliquez pour télécharger Xilisoft DPG Convertisseur
GraphicsGale (2.01.01)
GRAPHICSGALE (2.01.01)

GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ...

Cliquez pour télécharger GraphicsGale
Architecte 3D (Platinum 2010)
ARCHITECTE 3D (PLATINUM 2010)

Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é...

Cliquez pour télécharger Architecte 3D
TeamViewer 5 (TeamViewer 5)
TEAMVIEWER 5 (TEAMVIEWER 5)

Dépanner un ami,expliquer une manipulation devient un jeu d'enfant. Prise en main d'un autre ord...

Cliquez pour télécharger TeamViewer 5