Question sur les tableaux avec en-têtes fixes et tri sur les colonnes

**lolo5935** · 29/07/2010, 10h33

Bonjour,

J'utilise la technique des 2 tables + 1 div pour avoir mes en-têtes de colonnes figées et un ascenseur vertical.

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table id="tab1" width="910px">
 <tr>
  <td>Colonne1</td>
  <td>Colonne2</td>
 <tr>
</table>
<div style="width:940px; height:300px; overflow:auto;">
<table id="tab2" width="910px">
 <tr>
  <td>Colonne1</td>
  <td>Colonne2</td>
 <tr>
</table>
</div>

Le résultat est satisfaisant.

Je souhaite ajouter un tri sur mes colonnes.
J'ai récupéré un js qui fait ça très bien : sorttable.js (http://www.kryogenix.org/code/browse...le/#stablesort).

Le problème est que ce script ne fonctionne pas en utilisant la technique présentée ci-dessus (avec les 2 <table>)

J'ai bien trouvé une adaptation de ce script (http://www.wikistuce.info/doku.php/j...ableau_triable) mais il ne fonctionne pas très bien ...

Je suis un peu dans l'impasse

Si quelqu'un a une solution pour avoir un tableau avec en-têtes de colonnes fixes + tri je suis preneur

Merci

**SpaceFrog** · 29/07/2010, 10h37

forcément il suffit de modifier le click pour que l'evènement du tableau d'entetes ait une action sur le tableau du corps ...

**Watilin** · 29/07/2010, 10h44

Hello,
renseigne-toi sur les balises <thead> et <tbody>, ça peut te donner des idées

**lolo5935** · 29/07/2010, 10h47

Oui, très perspicace ta réponse SpaceFrog

D'ailleurs c'est ce que l'auteur du second script a tenté de faire ...
Le problème est que j'ai très peu de temps pour me lancer dans l'adaptation du premier js ... maintenant si il n'y pas d'autres solutions.

Mais plus généralement, vous faites comment pour créer ce genre de tableau (en-têtes fixes + tri sur colonnes) ?

Merci

**SpaceFrog** · 29/07/2010, 10h51

vu que le thead n'est pas géré correctement de façon crossbrowser, la solution des deux tableaux, ou l'emulation d'un header avec des div et les spans semble la meilleurs solution...
j'ai d'ailleurs il y a quelques années déja posté sur le sujet ...

http://www.developpez.net/forums/d16...ntete-tableau/

**lolo5935** · 29/07/2010, 11h06

Nous sommes d'accord SpaceFrog et je suis satisfait de la solution des 2 tableaux + div pour émuler un header.

Le problème est l'ajout du tri sur colonnes avec sorttable.js en utilisant cette technique ...

J'ai l'impression que je vais devoir adapter ce script ...

Pas d'autres solutions ?

Merci.

**SpaceFrog** · 29/07/2010, 11h10

si quelqu'un sonnes chez ton voisin ...
tu vas pas aller ouvrir ta porte...

**lolo5935** · 29/07/2010, 11h33

Si je vais voir qui sonne chez ma voisine ... elle me le demande, elle est sous ma douche

Parfois, il y a certains événements qui bousculent certains comportements ... comme quoi ^^

Sinon je n'ai rien appris de neuf mais merci quand même

**SpaceFrog** · 29/07/2010, 12h50

Si je vais voir qui sonne chez ma voisine

ce n'est pas ta voisine qui t'appelle ...
avec ton tableau c'est pareil !
c'est le header qui doit appeler les fonctions, c'est pas le corps qui va écouter ce qui se passe en haut.
Donc en effet rien de nouveau sous le soleil

**lolo5935** · 29/07/2010, 13h32

Envoyé par SpaceFrog

ce n'est pas ta voisine qui t'appelle ...

euh ... on est pas sur la même longueur d'onde

Envoyé par SpaceFrog

c'est le header qui doit appeler les fonctions, c'est pas le corps qui va écouter ce qui se passe en haut.

Qui a dit le contraire ? mon problème (dsl d'employer ce terme

) est que le (très bon) script que j'ai récupéré (sorttable.js) ne fonctionne pas avec 2 tableaux (mon premier tableau est le header et le second le body) et que ça me fait suer de l'adapter pour deux raisons :

1/ Je dois terminer rapidement le développement en question ;
2/ Je ne pratique pas trop le js par manque de temps.

Par conséquent, je demandais simplement s'il n'y avait pas d'autres solutions (que l'utilisation de deux tableaux) pour concevoir un tableau avec en-tête fixe + scrollbar ... Dans ce cas, je pourrais utiliser sorttable.js pour le tri des colonnes.

**SpaceFrog** · 29/07/2010, 13h50

vu que ton script js qui opère au tri est declenché par un click sur les entetes ... et que les solutions de mises en page ont été énumérées ci dessus...

je pense que tu devrais pouvoir en conclure que :
non il n'y a pas de methode crossbrowser pour fixer les entetes de colonne autres que les bidouilles avec soit deux tableaux soit une emulation d'enteêt de tableau avec des div span et autres
et par conséquent c'est le click sur cette entete qui declenche le tri

DONC pas d'autre possibilité que de modifier le script