Tri de tableau html

Soyez le premier à donner votre avis sur cette source.

Snippet vu 13 144 fois - Téléchargée 26 fois

Contenu du snippet

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)">&#9660;</SPAN>Date<SPAN CLASS="Order" onclick="TableOrder(1)">&#9650;</SPAN></TD>
    	<TD><SPAN CLASS="Order" onclick="TableOrder(-1)">&#9660;</SPAN>Données 1<SPAN CLASS="Order" onclick="TableOrder(1)">&#9650;</SPAN></TD>
    	<TD><SPAN CLASS="Order" onclick="TableOrder(-1)">&#9660;</SPAN>Données 2<SPAN CLASS="Order" onclick="TableOrder(1)">&#9650;</SPAN></TD>
    	<TD><SPAN CLASS="Order" onclick="TableOrder(-1)">&#9660;</SPAN>Données 3<SPAN CLASS="Order" onclick="TableOrder(1)">&#9650;</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>

A voir également

Ajouter un commentaire

Commentaires

Gorrk
Messages postés
97
Date d'inscription
mercredi 16 avril 2003
Statut
Membre
Dernière intervention
26 avril 2007
-
Impressionnant
proffial
Messages postés
35
Date d'inscription
mardi 20 mai 2003
Statut
Membre
Dernière intervention
23 juillet 2009
-
mortel, genial, trop pur ...

pour ma part, j'ai juste fait une petite modif dans le code:
dans la fonction TableOrder(dir)

while (oCell.tagName != "TD"){

je l'ai remplacé par :

while ((oCell.tagName != "TD")&&(oCell.tagName != "TR")){

pour prendre en considération les balises TR ...

Bon, je sais je chipote là ;)

Et je te mets 10 tout de suite ;)

Merci beaucoup pour cette source
econs
Messages postés
4030
Date d'inscription
mardi 13 mai 2003
Statut
Modérateur
Dernière intervention
23 décembre 2008
19 -
chapeau bas.
cs_phm
Messages postés
49
Date d'inscription
jeudi 17 janvier 2002
Statut
Membre
Dernière intervention
23 avril 2009
-
Bravo !
j'ai une proc asp qui fait de la conversion de fichier texte en html.
donc pas de base de données derrière...
Ton tri html est tout indiqué et fonctionne parfaitement !!!
Bravo c'est très très fort !!!
cs_phm
Messages postés
49
Date d'inscription
jeudi 17 janvier 2002
Statut
Membre
Dernière intervention
23 avril 2009
-
petit retour supplémentaire : merci encore Franck pour ta contribution.
Voici un ajout pour trier les numériques :

2 fonctions supplémentaires et une modif de la fonction tableorder :

function IsNumber(sNum){
sNum=sNum.replace(",",".")
if(isNaN(sNum))
{return false}
else
{return true}
}

function cNumber(sNum){ // Convertie un nombre chaine en correct
sNum=sNum.replace(",",".")
return((sNum*1))
}

et dans la fonction tableorder,
tu remplaces :

ColonneText[RowNb] = IsDate(oTable.rows[r].cells[c].innerText) ? cDate(oTable.rows[r].cells[c].innerText) : oTable.rows[r].cells[c].innerText


par

est-ce une date ?
si non
est-ce un nombre (attention je ne remplace pas les virgules par des points)
si non
c'est une chaine

ColonneText[RowNb] = IsDate(oTable.rows[r].cells[c].innerText) ? cDate(oTable.rows[r].cells[c].innerText) : IsNumber(oTable.rows[r].cells[c].innerText) ? cNumber(oTable.rows[r].cells[c].innerText) : oTable.rows[r].cells[c].innerText
@+++

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.