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.

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.

Exemple :

Example:

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/tablesort/";
document.write('<table 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>');
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('</table>');
}

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>