[Résolu] Tri de tableau HTML avec DOM

Bonjour,

Je cherchai désespérément à pouvoir classer un tableau HTML grâce à du JavaScript sans créer le tableau en JavaScript. En effet, le tableau comporte des checkbox (input) qui ne peuvent pas être inséré dans des tableaux HTML.

J'ai alors trouvé le script de QuentinC ici :
JavaScript
qui permet de trier par colonne, mais j'aimerai que lorsqu'on clique une seconde fois sur l'entête de colonne, celle-ci soit classée dans l'ordre inverse. Etant débutant en JavaScript j'espère que vous pourrez m'aider sur ce problème.

Voici le code JavaScript :

function sortTable (tb, n) {

var iter = 0;
	
	while (!tb.tagName || tb.tagName.toLowerCase() != "table")
	{
		if (!tb.parentNode) return;
		tb = tb.parentNode;
	}

	if (tb.tBodies && tb.tBodies[0]) tb = tb.tBodies[0];

var reg = /^\d+(\.\d+)?$/g;
var index = 0, value = null, minvalue = null;

	for (var i= tb.rows.length -1; i >= 0; i -= 1) {
		minvalue = value = null;
		index = -1;
		for (var j=i; j >= 0; j -= 1) {
			value = tb.rows[j].cells[n].firstChild.nodeValue;
			if (!isNaN(value)) value = parseFloat(value);
			if (minvalue == null || value < minvalue) { index = j; minvalue = value; }
		}

		if (index != -1) {
			var row = tb.rows[index];
			if (row) {
			tb.removeChild(row);
			tb.appendChild(row);
			}
		}
	}
}

Les infos pour classer le tableau sont transmises sous cette forme :

<thead>
		<tr><th><a href="#" onclick="sortTable(this,0); return
	false;">Colonne 1</a></th>
		<th><a href="#" onclick="sortTable(this,1); return false;">Colonne 2</a></th>
		</tr>
	</thead>

Je pense qu'il faudrait rajouter une troisième variable, mais je ne sait pas comment faire en sorte que cela classe le tableau dans l'autre sens.

Merci d'avance.
Modifié par Zetura (04 Jul 2008 - 11:00)

Salut!

Si tu es partant, voici l'adresse d'un site qui propose de merveilleux plugins... dont un qui permet le tri dynamique de table HTML. Un certains nombre de 'bug' apparaissent lorsque l'on cherche une utilisation plus poussé, mais pour une utilisation "simple" cela devrait te suffire. Sinon, il faut plonger dans le code (j'en suis !)
http://www.phatfusion.net/sortabletable/

Tiens moi au courant.
Modifié par AdJiBouDi (03 Jul 2008 - 18:14)

Pour obtenir le tri dans l'ordre inverse, c'est cette ligne qu'il faut changer :

			if (minvalue == null || value < minvalue) { index = j; minvalue = value; }

En principe il suffit juste d'inverser la comparaison, c'est-à-dire changer le < en >. Donc value > minvalue à la place de value < minvalue.

Il faut enregistrer le dernier tri demandé au début de la fonction. Si on demande le même, alors il faut faire le tri dans l'ordre inverse, il faut donc ajouter une condition.

S'il le faut, je peux vite regarder pour ajouter cette fonctionnalité à mon script. Ca fait un moment que je ne l'ai pas touché...

Okay merci, je vais essayer de faire ça demain. Je pense que ça devrait aller.

J'ai également un autre problème, mais je vais plutôt le poster dans un nouveau sujet parceque c'est un problème tout autre et plus complexe ^^