Discussion :

[Erakis]

Bonjour � tous,

J'ai besoin de construire une table qui permet de scroller tout en gardant le header fix. La meilleure solution � mon avais serait d'utiliser 2 tables, une pour les en-t�te et l'autres pour les cellules du body.

Ma table doit �tre �lastique et son contenu est dynamique, alors il m'est pas possible de fixer les colonnes � des valeurs fixes comme des px ou % avec un parent d'une largeur fixe.

Le meilleure exemple que j'ai trouv� est celui-ci : jQueryMobile Table-IScroll/

Cet exemple fonctionne parfaitement, mais : Je devrai utiliser ce princpe pour diff�rentes tables dont certainnes ont des en-t�te muni de colspan, parfois 2 �tages, parfois 3. Dans d'autres tables, je peux avoir des cellule qui consomme toute la ligne (colspan="table cell count").

Voil�, je cherche � am�liorer la fonction qui permet de syncroniser la largeur des en-t�tes de la premi�re table avec celle de la deuxi�me. Dans l'exemple cit� pr�cedemment voici ce qui est utilis� :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
 
var headerColumns = $('#positions-table-header tr th');
var bodyColumns = $('#positions-table-body tr:first td');
for (var i = 0; i < headerColumns.length; i++) {
      $(headerColumns[i]).width($(bodyColumns[i]).width());
}

Pour une table sans colspan, �a fonctionne � merveille. Imaginons maintenant que la table � 2 rang�s d'en-t�te et poss�de aussi des tr contenant qu'une seule cellule (colspan=7) ayant une class nomm� trMyGroup.

• La premi�re rang� poss�de 3 colonnes (colspan=3, colspan=2, colspan=2)
• La deuxi�me rang� poss�de 7 colonnes (colspan=1)

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
 
                                        En-tête                 En-tête
En-tête    En-tête    En-tête     En-tête     En-tête      En-tête    En-tête

Voici ce que j'ai fait pour adapt� le tout :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
 
var headerColumns = $('#positions-table-header tr:nth-child(2) th');
var bodyColumns = $('#positions-table-body tr:not(.trMyGroup) td');
for (var i = 0; i < headerColumns.length; i++) {
      $(headerColumns[i]).width($(bodyColumns[i]).width());
}

Voil� �a fonctionne super bien

Mais y aurait-il un moyen d'automatiser un peu plus ce code de syncronisation sans que j'aie � le r�p�ter et changer les filtres jQuery pour qu'il fonctionne bien ? En ce sens, je veux dire un code qui fonctionnerait autant quand j'ai pas de colspan que quand j'en ai. Sachant que les deux tables auront TOUJOURS le m�me nombre de colonne au finale.

Je ne sais pas trop comment m'y prendre c�t� aglo alors si quelqu'un a d�j� fait face � cet algo, je lui en serait reconnaissant.

PS : Je ne peux pas utiliser la dataTable, je l'utilisait avant, mais � cause de certaines limitations elle � �t� retir�. Du coup j'ai jeter un coup d'oeil au code source afin de voir comment il s'y prenne pour syncroniser la taille des colonnes de leur 2 tables, y honn�tement j'y comprend pas grand chose.

Merci

[SylvainPV]

C'est davantage un probl�me CSS que JavaScript. Pour moi, �a peut se faire simplement avec position:fixed en CSS.

Une petite recherche google et j'ai trouv� �a : http://salzerdesign.com/test/fixedTable.html

[Erakis]

Bonjour Sylvain,

J'ai consult� votre lien, merci c'est int�ressant. On peut aussi arriver � faire similaire qu'avec 2 tables en layout fixed. Cependant, d'ordre g�n�ral j'aimerais r�aliser cette artifice avec Javascript.

[SpaceFrog]

http://www.developpez.net/forums/d24...ableau-scroll/