Création d'un tableau triable par colonne.

Bonsoir,


J'aimerais réaliser pour mon site internet un tableau pouvant être trié en fonction des colonnes (en cliquant sur les entêtes). Pour ne pas avoir à recharger les informations plusieurs fois (dans le cas d'un tableau réalisé avec php) je me suis tourné vers les langages de script que son JavaScript et ECMAScript avec le modèle DOM voir (dans l'extrême) XSL avec la mise en page d'XML.

Pour éviter d'utiliser des fonctions que je ne maitrise pas je préfèrerais éviter les script tout fait. Pourriez vous m'indiquer des pistes de recherches ou une manière de procéder pour réaliser ce tableau ?

Merci d'avance pour vos futures réponse.


Cordialement,
Kazuki.

Bonsoir,

Et bien, étant donnés tes critères voici comment je ferais :
Sans te donner le détail que tu ne veux pas (Si tu le souhaites tout de même demande-le)
Donc, dans le principe :

1/ Tu mets ton tableau html dans un tableau javascript.
du genre : colonne k ligne j -> Tab[k][j]
2/ Tu crées un second tableau . Unidimensionnel celui-la. Appelons le SortedTab.
Chaque membre de SortedTab correspond à une ligne de ton tableau html.
Tu initialises chaque membre avec la concaténation de toutes les cases de la ligne séparées par un signe de reconnaissance et en commençant par la colonne par laquelle tu souhaites trier :
Par ex : SortedTab[k]=Tab[6][k]+"*"+Tab[0][k]+"*"+Tab[1][k]...
Ceci en admettant que tu souhaites trier par la colonne 6.
3/ Tu exécutes la méthode sort sur ton tableau ainsi construit:
SortedTab.sort()
4/ Tu réexploses ton SortedArray vers un tableau deux dimensions avec la méthode split.
Tabtrié[k]=SortedTab[k].split("*");
5/ Tu réconstitues le Tab à partir de Tabtrié en sachant que le prémier élément est en fait associé à la sixième colonne...

Bon... je vais relire... je ne suis pas sûr de me comprendre moi-même.

Mais bon, la méthode que tu demandes pour t'expliquer n'est pas forcément la plus commode...

!!!!!!! EDIT !!!!! AH FLUTE !!! JE CRAQUE !!! L'éditeur n'aime pas les i entre crochets... Attends ! Je reprends tout avec des k...
Modifié par aCOSwt (09 Feb 2007 - 21:08)

Merci aCOSwt pour ton explication.

J'ai à peu prés tout compris, par contre là où ça me pose un problème c'est au niveau de l'actualisation du tableau. C'est a dire, comment remplacer l'ancien tableau par le nouveau ? Es qu'il faut que me tourne du coté DOM ou y a t-il une manière plus pratique de le faire en JavaScript ?


J'entendais par "script tout fait" les scripts que l'on trouve sur les sites spécialisés en JavaScript et où on a juste à copier coller ^^'

Forcément que tu passes par le dom pour remplir ton tableau html avec les nouvelles valeurs de ton tableau Javascript.

Bon... il y aurait bien une autre méthode...
Mais... je vais me faire taper sur les doigts si je la signale ici...

chttt... tu peux aussi identifier tous lesTD de ton tableau html avec un id="..." et les remplir toutes avec innerHTML...

Mais... c'est vrai que c'est moins.... esthétique !

Salut,
Tu peux t'inspirer de mon script :
http://quentinc.net/javascript/script56-tri-dynamique-de-tableau-html-avec-le-dom/


Le fonctionnement est encore plus simple que celui de l'intervenant précédent.
Dans la version que je propose, il n'y a pas besoin d'identifiant nulle part : le script se charge de tout.
IL n'y a pas non plus besoin de remplir le tableau par javascript. Un simple tableau HTML fonctionne.
Le principe est simple : les cellules sont parcourues, analysées et triées avec les méthodes du DOM.
Le tri fonctionne aussi bien pour les valeurs numériques que pour les valeurs chaîne.
Les lignes sont enlevées puis replacées à leur nouvel emplacement par removeChild/appendChild.
Modifié par QuentinC (10 Feb 2007 - 07:57)

Le demandeur ne voulait pas d'un script à copier coller !

Ta méthode est sympatique QuentinC et efficace (comme d'habitude).
Elle est en revanche significativement moins rapide (d'exécution) que la mienne.

Salut,

aCOSwt a écrit :
Ta méthode est sympatique QuentinC et efficace (comme d'habitude).
Elle est en revanche significativement moins rapide (d'exécution) que la mienne.

Oui, mais elle a l'avantage d'être accessible (entre autres pour les moteurs de recherche), et d'être bien plus facilement maintenable.

Bonjour à tous.

Je ne m'imaginais pas que le samedi était le jour des JavaScriptÿstes...

1/ Tu marques le point Julien en ce qui concerne l'accessibilité pour les moteurs de recherche.

2/ En revanche je ne saisis pas bien en quoi réside une maintenabilité plus facile.

3/ J'ajoute par ailleurs que ma méthode inclut sans code supplémentaire une possibilité de tris secondaires ce que n'autorise pas la méthode de QuentinC.
C'est presque toujours une necessité quand on se met à vouloir trier des tableaux que de pouvoir traiter élégamment un cas d'égalité en considérant un critère de tri secondaire.

aCOSwt a écrit :
2/ En revanche je ne saisis pas bien en quoi réside une maintenabilité plus facile.

Avoir le contenu dans le HTML et le JavaScript dans un fichier externe est quand même un principe qui a fait ses preuves...

aCOSwt a écrit :
3/ J'ajoute par ailleurs que ma méthode inclut sans code supplémentaire une possibilité de tris secondaires ce que n'autorise pas la méthode de QuentinC.

Ah bon, et pourquoi ne l'autoriserait-elle pas ?

Julien Royer a écrit :
Ah bon, et pourquoi ne l'autoriserait-elle pas ?

sortTable (tb, n) !

On ne passe qu'un paramètre. Alors que l'on peut organiser la concaténation comme on le souhaite.

Enfin... pour ce que j'en dis... Je ne souhaite nullement que mes propos soient pris en arguments contre la contribution de QuentinC.

Il a fait ses preuves et la preuve de la qualité de ses contributions alors que je n'étais qu'en culottes courtes...

Sportivement donc !

aCOSwt a écrit :
sortTable (tb, n) !

On ne passe qu'un paramètre. Alors que l'on peut organiser la concaténation comme on le souhaite.

Tu peux très bien modifier le script en question pour qu'il prenne en compte d'autres infos, qui sont soit dans ton code JS, soit dans le HTML.

a écrit :

Elle est en revanche significativement moins rapide (d'exécution) que la mienne.

Je reconnais que c'est peut-être un de ses points faibles ... mais il est plus facile de mettre à jour un unique tableau HTML plutôt qu'un tableau HTML plus des tableaux javascript.
Entre rapidité d'exécution et maintenabilité, lequel des deux arguments a le plus de poids aujourd'hui ?
Personnellement à l'heure où les processeurs en sont à 1,5 ou 2 GHz en moyenne (je parle bien des ordinateurs en moyenne, pas le top haut de gamme bien sûr; tout le monde n'a pas un dual core 4 GHz), j'opte nettement pour la maintenabilité.

Concernant le tri de colonne secondaire : il suffit de cliquer successivement sur deux en-têtes de colonne et le tour est joué : d'abord la secondaire, et ensuite la principale. Je n'ai pas testé cette éventualité mais je ne vois pas pourquoi ça ne marcherait pas.

Merci pour toutes vos réponses.

QuentinC, j'ai décomposé le script dont tu as posté le lien. Par contre j'ai modifié un point au debut. Son utilité fondamentale m'a peut être échappé alors je le poste :

while ((tb.parentNode != null) && (tb.tagName.toLowerCase() != "table"))
	{	
		tb = tb.parentNode;
	}

suivit d'une "if (tableau.tagName.toLowerCase() == "table")"

Au lieu de :

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

Le "!tb.tagName" permet vérifier que l'on est pas a la fin du document. J'ai préféré mettre directement "tableau.parentNode != null" car si le noeud n'a pas de parentNode c'est obligatoirement la fin du document. Qu'en penses-tu ?


Je ne comprend pas trés bien cette condition

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

Pourquoi n'utilises-tu pas directement ?

tb = tb.tBodies[0];

Est ce que tu pourrais m'expliquer pourquoi tu définis la variable "reg" alors que tu ne l'utilises pas après ?

Je trouves le trie par sélection très approprié dans ce cas là car les méthodes "removeChild" et "appendChild" tombe sous le sens.

Désolé pour toutes ces questions, mais j'aime bien comprendre ce que j'implante avant de le l'utiliser ^^'

a écrit :

Le "!tb.tagName" permet vérifier que l'on est pas a la fin du document. J'ai préféré mettre directement "tableau.parentNode != null" car si le noeud n'a pas de parentNode c'est obligatoirement la fin du document. Qu'en penses-tu ?

Bah c'est deux façons d'arriver au même but.

a écrit :

Je ne comprend pas trés bien cette condition

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

Pourquoi n'utilises-tu pas directement ?

tb = tb.tBodies[0];

Parce qu'on est jamais sûr à 100% qu'un tableau possède bien un tbody. Si le webmaster code avec les pieds...

a écrit :

Est ce que tu pourrais m'expliquer pourquoi tu définis la variable "reg" alors que tu ne l'utilises pas après ?

Rapidement je ne peux pas répondre, faudrait que je me replonge dans le code en détail.

a écrit :

Je trouves le trie par sélection très approprié dans ce cas là car les méthodes "removeChild" et "appendChild" tombe sous le sens.

J'avais voulu essayer le tri dichotomique et ça faisait tout planter... c'est peut-être un peu plus lent mais au moins ça marche.

QuentinC a écrit :
Parce qu'on est jamais sûr à 100% qu'un tableau possède bien un tbody. Si le webmaster code avec les pieds...

Un tableau sans tbody n'est pas forcément une hérésie, si ?

Il faut savoir qu'un tbody est explicitement créé dans le DOM dans tous les cas, sauf si la page est servie en tant que application/xhtml+xml.

Julien Royer a écrit :
Un tableau sans tbody n'est pas forcément une hérésie, si ?

Le premier qui me met un <tbody> dans un tableau de présentation en croyant éviter l'hérésie a droit au bûcher
Modifié par Laurent Denis (13 Feb 2007 - 22:12)

Laurent Denis a écrit :
Le premier qui me met un <tbody> dans un tableau de présentation en croyant éviter l'hérésie a droit au bûcher

Je ne te savais pas si violent.

Laurent Denis a écrit :


Le premier qui me met un <tbody> dans un tableau de présentation en croyant éviter l'hérésie a droit au bûcher

Et moi qui croyait que dans ce thread on avait résolu de considérer en premier des exigences de maintenance...

aCOSwt a écrit :
Et moi qui croyait que dans ce thread on avait résolu de considérer en premier des exigences de maintenance...

Peux-tu préciser ta pensée s'il te plaît ?

Julien Royer a écrit :
Peux-tu préciser ta pensée s'il te plaît ?

Non ! Ce n'était que de l'humour. Enfin... encore un dont je suis le seul à rire.
Ta question prouve qu'il était lourd et l'expliquer l'engrasserait encore d'avantage en nous balaçant off topic !

Auto da fé !