Ce script permet le tri d'une table de données en ordre croissant ou décroissant de chacune des en-têtes de colonne, au choix. Le tri fonctionne pour les dates, les nombres, les montants et les textes. Les dates peuvent être en format international, américan ou européen mais les montants doivent être en format impérial. On peut ajouter autant de colonnes et de lignes que l'on veut. Le script permet également d'afficher les lignes du tableau avec des couleurs de fonds et autres caractéristiques différentes pour les lignes paires et impaires.

This script allow the sorting of a data table in increasing or decreasing order for each table column header, at choice. The sorting works for dates, numbers, amounts and texts. The date can be in international, american or european format, however the amounts must be in imperial format. You can add as many columns and lines as you wish. The script also allows to show the lines of the table with different background colors and other characteristics for even and odd lines.

Exemple :

Example:

Télécharger ce fichier (bouton droit, Enregistrer la cible sous...) et copier les fichiers qu'il contient dans un sous-répertoire /images :

Download this file (right click, Save the link as...) and copy the files it contains in a sub-directory /images:

Copier ceci dans la section <HEAD> entre des étiquettes <STYLE>et </STYLE> ou dans un fichier .css relié.

Copy this in the <HEAD> section between <STYLE> and </STYLE> tags or in a .css linked file.

Sélectionner tout et copier dans le Presse-papier (IE)

Select all and copy in the Clipboard (IE)

.Table {
	border: 2px #FFCC99 solid;
	}
.Header {
	border-bottom: 2px #FFCC99 solid;
	}
.Btn {
	width: 14px;
	height: 8px;
	border: none;
	background: none;
	color: #FFCC99;
	font-weight: bold;
	}
.Title {
	font-family: Arial;
	font-size: 11pt;
	font-weight: bold;
	color: #FFCC99;
	background: none;
	}
.Data {
	font-family: Arial;
	font-size: 9pt;
	color: #000000;
	background: none;
	border: none;
	padding-left: 5px;
	padding-right: 5px;
	}
.TxL {
	text-align: left;
	}
.Dte,.TxC {
	text-align: center;
	}
.Nbr,.Amt,.TxR {
	text-align: right;
	}

Copier ceci dans la section <HEAD> entre des étiquettes <SCRIPT>et </SCRIPT> ou dans un fichier .js relié.

Copy this in the <HEAD> section between <SCRIPT> and </SCRIPT> tags or in a .js linked file.

Sélectionner tout et copier dans le Presse-papier (IE)

Select all and copy in the Clipboard (IE)

function ldDate(datea,dateb,type,order) {
var yeara = 1*datea.substring(6,10);
var yearb = 1*dateb.substring(6,10);
if(type=="A") {
	var montha = 1*datea.substring(0,2);
	var monthb = 1*dateb.substring(0,2);
	var daya = 1*datea.substring(3,5);
	var dayb = 1*dateb.substring(3,5);
	}
if(type=="E") {
	var montha = 1*datea.substring(3,5);
	var monthb = 1*dateb.substring(3,5);
	var daya = 1*datea.substring(0,2);
	var dayb = 1*dateb.substring(0,2);
	}
if(order=="Up") {
	if (yeara > yearb) return true;
	if (yeara < yearb) return false;
	if (montha > monthb) return true;
	if (montha < monthb) return false;
	if (daya > dayb) return true;
	}
if(order=="Dn") {
	if (yeara < yearb) return true;
	if (yeara > yearb) return false;
	if (montha < monthb) return true;
	if (montha > monthb) return false;
	if (daya < dayb) return true;
	}
return false;
}
function ldRebuild(i) {
for(x=0; x<Head.length; x++) {
	document.forms[Line.length][Head[x][0]].value = document.forms[i][Head[x][0]].value;
	document.forms[i][Head[x][0]].value = document.forms[i+1][Head[x][0]].value;
	document.forms[i+1][Head[x][0]].value = document.forms[Line.length][Head[x][0]].value;
	}
}
function ldSortUp(type,name) {
for(j=0; j<Line.length; j++) {
	for(i=0; i<Line.length; i++) {
		if(type=="A" || type=="E") {
			if(ldDate(document.forms[i][name].value,document.forms[i+1][name].value,type,"Up")) {
				ldRebuild(i);
				}
			}
		else if(type=="I" || type=="T") {
			if(document.forms[i][name].value > document.forms[i+1][name].value)	{
				ldRebuild(i);
				}
			}
		else if(type=="N"){
			if(1*document.forms[i][name].value > 1*document.forms[i+1][name].value) {
				ldRebuild(i);
				}
			}
		else {
			alert("Wrong type of Header used.\nMauvais type de Header utilisé.");
			return false; }
		}
	}
}
function ldSortDn(type,name) {
for(j=0; j<Line.length; j++) {
	for(i=0; i<Line.length; i++) {
		if(type=="A" || type=="E") {
			if(ldDate(document.forms[i][name].value,document.forms[i+1][name].value,type,"Dn")) {
				ldRebuild(i);
				}
			}
		else if(type=="I" || type=="T") {
			if(document.forms[i][name].value < document.forms[i+1][name].value) {
				ldRebuild(i);
				}
			}
		else if(type=="N"){
			if(1*document.forms[i][name].value < 1*document.forms[i+1][name].value) {
				ldRebuild(i);
				}
			}
		else {
			alert("Wrong type of Header used.\nMauvais type de Header utilisé.");
			return false;
			}
		}
	}
}
function ldTable() {
dir = "javascripts/combine/";
document.write('<table id="Alternate" class="Table" border=0 cellpadding=0 cellspacing=5>');
document.write('<tr class="Title">');
for(h=0; h<Head.length; h++) {
	document.write('<td align="center" class="Header">');
	document.write('<table border="0" cellpadding="0" cellspacing="0" align="center">');
	document.write('<tr class="Title"><td>');
	document.write(Head[h][5]+" ");
	if(Head[h][1]!="Var") {
		document.write('</td><td>');
		document.write('<table border="0" cellpadding="0" cellspacing="0">');
		document.write('<tr class="Title"><td>');
		document.write('<button hidefocus class="Btn"');
		document.write(" onClick='ldSortUp(");
		document.write('"'+Head[h][2]+'","'+Head[h][0]+'"');
		document.write(")'>");
		document.write('<img src="'+dir+'images/sort_up.gif" width="11" height="6" border="0" vspace="1">');
		document.write('</button>');
		document.write('</td></tr><tr class="Title"><td>');
		document.write('<button hidefocus class="Btn"');
		document.write(" onClick='ldSortDn(");
		document.write('"'+Head[h][2]+'","'+Head[h][0]+'"');
		document.write(");'>");
		document.write('<img src="'+dir+'images/sort_dn.gif" width="11" height="6" border="0" vspace="1">');
		document.write('</button>');
		document.write('</td></tr></table>');
		}
	else {}
	document.write('</td></tr></table>');
	document.write('</td>');
	}
document.write('</tr><tbody>');
for(n=0; n<Line.length; n++) {
	document.write('<form method="post"><tr>');
	for(h=0; h<Head.length; h++) {
		document.write('<td><input type="text" name="'+Head[h][0]+'"');
		document.write(' class="Data" style="width:'+Head[h][3]+'; text-align:'+Head[h][4]+'"');
		document.write(' value="'+Line[n][h]+'"></td>');
		}
	document.write('</tr></form>');
	}
document.write('<form method="post"><tr style="display: none">');
for(h=0; h<Head.length; h++) {
	document.write('<td><input type="hidden" name="'+Head[h][0]+'" class="'+Head[h][1]+'"></td>');
	}
document.write('</tr></form>');
document.write('</tbody></table>');
}
// this function is needed to work around 
// a bug in IE related to element attributes
function ldAtribute(obj) {
	var result = false;
	if (obj.getAttributeNode("class") != null) {
		result = obj.getAttributeNode("class").value;
		}
	return result;
} 

function ldAlternate(id) {
// the flag we'll use to keep track of 
// whether the current row is odd or even
var even = false;

// if arguments are provided to specify the colours
// of the even & odd rows, then use the them;
// otherwise use the following defaults:
var evenColor = arguments[1] ? arguments[1] : "#FFFFFF";
var oddColor = arguments[2] ? arguments[2] : "#C0C0C0";

// obtain a reference to the desired table
// if no such table exists, abort
var table = document.getElementById(id);
if (! table) { return; }

// by definition, tables can have more than one tbody
// element, so we'll have to get the list of child
// <tbody>s 
var tbodies = table.getElementsByTagName("tbody");

// and iterate through them...
for (var h = 0; h < tbodies.length; h++) {
	// find all the <tr> elements... 
	var trs = tbodies[h].getElementsByTagName("tr");
	// ... and iterate through them
	for (var i = 0; i < trs.length; i++) {
		// avoid rows that have a class attribute
		// or backgroundColor style
		if (! ldAtribute(trs[i]) && ! trs[i].style.backgroundColor) {
			// get all the cells in this row...
			var tds = trs[i].getElementsByTagName("td");
			// and iterate through them...
			for (var j = 0; j < tds.length; j++) {
				var mytd = tds[j];
				// avoid cells that have a class attribute
				// or backgroundColor style
				if (! ldAtribute(mytd) && ! mytd.style.backgroundColor) {
					mytd.style.backgroundColor = even ? evenColor : oddColor;
					}
				}
			}
		// flip from odd to even, or vice-versa
		even =! even;
		}
	}
}

Copier ceci à l'intérieur l'étiquette <BODY>.

Copy this inside the <BODY> tag.

Sélectionner tout et copier dans le Presse-papier (IE)

Select all and copy in the Clipboard (IE)

<body onLoad="ldAlternate('Alternate', '#FFFFFF', '#C0C0C0');">

Copier ceci dans la section <BODY> à l'endroit désiré dans la page.

Copy this in the <BODY> section at the desired location in the page.

Sélectionner tout et copier dans le Presse-papier (IE)

Select all and copy in the Clipboard (IE)

<script>
/*
Head[i] = [Id, Class, Type, Width, Justification, Title];
Id is a distinctive name for the item (may not contains invalid characters like #\/$%?&@ etc.)
Class choices are:
   Nbr for numbers
   Amt for amounts
   Dte for dates
   Txt for texts
   Var for viaria that don't need sorting keys
 Type choices are:
 	N for numbers and amounts
	I for dates in international format (yyyy/mm/dd or yy/mm/dd)
	A for dates in american format (mm/dd/yyyy or mm/dd/yy)
	E for dates in european format (dd/mm/yyyy or dd/mm/yy)
	T for texts
Width is the width of the column
Justification choices for the dzata are (titles are always centered):
	Left
	Center
	Right
Title is the text appearing as column header
*/ 
Head = new Array();
Head[0] = ["A","Nbr","N", 50,"right","#"];
Head[1] = ["B","Dte","I", 80,"center","Date"];
Head[2] = ["C","Nbr","N", 50,"right","N°"];
Head[3] = ["D","Txt","T",150,"left","Description"];
Head[4] = ["E","Amt","N", 70,"right","$"];
Head[5] = ["F","Var"," ", 50,"center","Data"];

Line = new Array();
Line[0] = ["1","2005/01/04","3","Sears Canada","99.10","a"];
Line[1] = ["2","2004/12/27","7","Bell Canada","50.03","b"];
Line[2] = ["3","2005/01/03","1","Vidéotron","185.68","c"];
Line[3] = ["4","2004/12/31","33","Future Shop","422.05","d"];
Line[4] = ["5","2005/01/09","22","Reader's Digest","31.95","e"];

ldTable();
</script>