Tri dynamique d'un tableau html avec reconnaissance automatique des donnees

Soyez le premier à donner votre avis sur cette source.

Vue 33 221 fois - Téléchargée 2 379 fois

Description

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 / Exemple :


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

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
3
Date d'inscription
samedi 6 juin 2009
Statut
Membre
Dernière intervention
23 octobre 2010

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.
Messages postés
2
Date d'inscription
jeudi 9 avril 2009
Statut
Membre
Dernière intervention
10 avril 2009

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
Messages postés
2
Date d'inscription
jeudi 9 avril 2009
Statut
Membre
Dernière intervention
10 avril 2009

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
Messages postés
40
Date d'inscription
mardi 2 septembre 2003
Statut
Membre
Dernière intervention
20 avril 2009

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
Messages postés
2
Date d'inscription
mardi 25 avril 2006
Statut
Membre
Dernière intervention
19 décembre 2006

Merci beaucoup !!!

Temps de mise en place < 1 minutes.

Parfait

Encore merci !
Afficher les 14 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.