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)>▼</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>
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/
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.