Ce code permet de trier les tableaux HTML par colonne,
tres simple a mettre en place, les rangées doivent etre
identifiée pour faire partie des donées a trier.
Source / Exemple :
<HTML>
<HEAD>
<SCRIPT>
// Code créé par francktfr pour www.systeme-d.net
function SortArray(aText,aHtml,Index,Order){
var Test = Order > 0 ? "aText["+Index+"][b] > aText["+Index+"][a]" : "aText["+Index+"][b] < aText["+Index+"][a]" // Choix de la comparaison
for (a = 0; a < aText[Index].length; a++) // Liste de tous les éléments du tableau
{
for (b = 0; b < aText[Index].length ;b++) // Re-liste tous les éléments pour les comparer à Numbers[a]
{
if (eval(Test)) {
for (i=0; i<aText.length; i++){ // Mise a jour des tableaux
Copy = aText[i][b]; aText[i][b] = aText[i][a]; aText[i][a] = Copy
Copy = aHtml[i][b]; aHtml[i][b] = aHtml[i][a]; aHtml[i][a] = Copy
}
}
}
}
}
function IsDate(sDate){ // retourne true si c'est une date valide
if (sDate.length < 8){return false}
var iDay = sDate.substring(0,2)
var iMonth = sDate.substring(3,5)
var iYear = sDate.substring(6)
iDay = iDay*1
iMonth = (iMonth*1)-1
iYear = iYear*1
var rDate = new Date(iYear,iMonth,iDay,0,0)
if(rDate.toString() == "NaN"){return false}
return true
}
function cDate(sDate){ // Convertie une date du format JJ/MM/AAAA en date JavaScript
var iDay = sDate.substring(0,2)
var iMonth = sDate.substring(3,5)
var iYear = sDate.substring(6)
iDay = iDay*1
iMonth = (iMonth*1)-1
iYear = iYear*1
var rDate = new Date(iYear,iMonth,iDay,0,0)
return(rDate)
}
function TableOrder(Dir){ // 1: Croissant, -1: Décroissant
var oCell = event.srcElement
while (oCell.tagName != "TD"){oCell = oCell.parentElement} // determine la cellule sélectionnée
var oTable = oCell.parentElement
while (oTable.tagName != "TABLE"){oTable = oTable.parentElement} // determine l'objet table parent
var index = -1
for (c=0; c<oTable.rows[0].cells.length; c++){if (oTable.rows[0].cells[c]==oCell){index=c}} // determine l'index de la cellule
var RowNb = 0
var aHtmlTable = new Array() // Tableau de contenu HTML
var aTextTable = new Array() // Tableau de valeur
for (c=0; c<oTable.rows[0].cells.length; c++){ // sur toutes les cellules
var ColonneHtml = new Array()
var ColonneText = new Array()
var RowNb = 0
for (r=0; r<oTable.rows.length; r++){ // de toutes les rangées nommées "TableDatas"
if (oTable.rows[r].id == "TableDatas"){
ColonneHtml[RowNb] = oTable.rows[r].cells[c].innerHTML // met a jour le tableau de colonne correspondant
ColonneText[RowNb] = IsDate(oTable.rows[r].cells[c].innerText) ? cDate(oTable.rows[r].cells[c].innerText) : oTable.rows[r].cells[c].innerText
RowNb++
}
}
aHtmlTable[c] = ColonneHtml
aTextTable[c] = ColonneText
for (a=0; a<ColonneHtml.length; a++){aHtmlTable[c][a]=ColonneHtml[a]}
for (a=0; a<ColonneText.length; a++){aTextTable[c][a]=ColonneText[a]}
}
RowNb=0
SortArray(aTextTable,aHtmlTable,index,Dir) // Tri des données
for (x=0; x<oTable.rows[0].cells.length; x++){ // Remplacement des données dans le tableau HTML
RowNb=0
for (y=0; y<oTable.rows.length; y++){
if (oTable.rows[y].id == "TableDatas"){
oTable.rows[y].cells[x].innerHTML= aHtmlTable[x][RowNb]
RowNb++
}
}
}
}
</SCRIPT>
<STYLE>
.Table{font: 12 Arial; text-align: center; border: 1 solid black}
.Order{font: 12 Arial; cursor: hand; font-weight: bold; padding-left: 5; padding-right: 5}
</STYLE>
</HEAD>
<BODY>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=1 CLASS="Table">
<TR BGCOLOR=#CCCCCC>
<TD><SPAN CLASS="Order" onclick="TableOrder(-1)">▼</SPAN>Date<SPAN CLASS="Order" onclick="TableOrder(1)">▲</SPAN></TD>
<TD><SPAN CLASS="Order" onclick="TableOrder(-1)">▼</SPAN>Données 1<SPAN CLASS="Order" onclick="TableOrder(1)">▲</SPAN></TD>
<TD><SPAN CLASS="Order" onclick="TableOrder(-1)">▼</SPAN>Données 2<SPAN CLASS="Order" onclick="TableOrder(1)">▲</SPAN></TD>
<TD><SPAN CLASS="Order" onclick="TableOrder(-1)">▼</SPAN>Données 3<SPAN CLASS="Order" onclick="TableOrder(1)">▲</SPAN></TD>
</TR>
<TR BGCOLOR=#EEEEEE ID=TableDatas><TD>01/02/2003</TD><TD>2</TD><TD>3</TD><TD>Bidule</TD></TR>
<TR BGCOLOR=#DDDDDD ID=TableDatas><TD>02/02/2003</TD><TD>1</TD><TD>2</TD><TD>Machin</TD></TR>
<TR BGCOLOR=#EEEEEE ID=TableDatas><TD>03/01/2003</TD><TD>3</TD><TD>1</TD><TD>Truc</TD></TR>
<TR BGCOLOR=#DDDDDD ID=TableDatas><TD>06/02/2003</TD><TD>5</TD><TD>1</TD><TD>Personne</TD></TR>
<TR BGCOLOR=#EEEEEE ID=TableDatas><TD><FONT color=#FF0000>05/02/2003</FONT></TD><TD><FONT color=#FF0000>2</FONT></TD><TD><FONT color=#ff0000>4</FONT></TD><TD><FONT color=#FF0000>Autre</FONT></TD></TR>
<TR BGCOLOR=#CCCCCC><TD>Total</TD><TD>13</TD><TD>11</TD><TD></TD></TR>
</TABLE>
</BODY>
</HTML>
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.