begin process at 2012 02 11 23:51:50
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

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 - par 4 personnes
9,75 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 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é :23 472 / 1 747
Auteur : larion

Ecrire un message privé
Site perso
Commentaire sur cette source (14)
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)>&#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>
<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 !

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

Source avec Zip Source avec une capture MENU TOUJOURS A LA MEME POSITION TRES FLUIDE
Source avec Zip Source avec une capture CHANGER DE THEME ET DE COULEUR
Source avec Zip Source avec une capture MENU HORIZONTAL DYNAMIQUE AVEC SOUS-MENUS AVEC FONDU
Source avec une capture MENU VERTICAL AVEC SOUS-MENUS
Source avec Zip Source avec une capture MENU HORIZONTAL ET VERTICAL
Toutes les sources de larion

 Sources de la même categorie

COLONNES ADAPTABLES EN HAUTEUR par dronoide
Source avec Zip VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES par william voirol
Source avec Zip Source avec une capture HTML5 PLAYER par kazma
Source avec Zip Source avec une capture SCROLLBAR PERSONNALISABLE par kazma
Source avec Zip INFO BULLE par RudiRatlos
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)>&#9650;</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

Commentaire de sbso le 23/10/2010 09:43:27

D'accord pour le tri du texte.
Mais si on a une mise en forme pour nos lignes ...
La mise en forme n'est pas triée, elle !
Donc notre objet reservé rouge passe en vert.
C'est génial.

Sinon ca aurait été vraiment bon ...
Dommage.

 Ajouter un commentaire

Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,764 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)