Discussion :

[Manu2.0]

Bonjour à tous,

J'ai un gros tableau html à afficher et je voulais savoir si je pouvais faire afficher les lignes du tableau au fur et à mesure de son chargement.

Je ne peux pas prendre des divs à la place du tableau car ma première colonne n'a pas de largeur fixe, et si je fixe une largeur, cela peut influer sur la hauteur de quelques lignes. De plus, je désaffiche/affiche des lignes et des colonnes à l'aide de javascript, ce qui modifie la largeur de la première colonne.

Comme mon tableau est assez important à s'afficher, je voulais savoir si le javascript permettait d'afficher des éléments de tableau dès qu'ils sont chargés. Je sais que c'est possible avec des divs, mais l'est-ce avec les tableaux ?

Une question subsidiaire est aussi de fixer la première ligne (lignes des intitulés) comme l'on peut faire dans des tableurs et de permettre un scroll sur les lignes suivantes. J'ai bien trouvé un bout de code sur developpez.com (ici):

Code :

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

1
2
3
4
5
6
<div style="height:200px;width:20px;overflow:auto;float:left;" onscroll="document.getElementById('tableau').scrollTop=this.scrollTop;">
</div>
<div id="tableau" style="height:200px;overflow:hidden;width:80%;">
<table border="1" width="100%">
</table>
</div>

Je ne suis pas sûr que d'incorporer des divs dans un tableau (<table>) en chevauchant les différents tags soit très "joli" en html en suivant ce schéma:

Code :

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

1
2
3
4
5
6
<table border="1" width="100%"><tr><td></td><td></td></tr><div style="height:200px;width:20px;overflow:auto;float:left;" onscroll="document.getElementById('tableau').scrollTop=this.scrollTop;">
</div>
<div id="tableau" style="height:200px;overflow:hidden;width:80%;">
<tr><td></td><td></td></tr> (x fois...)
</table>
</div>

Si vous avez des idées, je suis preneur !

Merci de vos conseils !

[le_chomeur]

Salut

J'ai un gros tableau html à afficher et je voulais savoir si je pouvais faire afficher les lignes du tableau au fur et à mesure de son chargement.

Pas à ma connaissance, tu fais un load de tes données via ajax je présume ?
si oui met plutôt un message d'avertissement , indiquant que le tableau est en cours de chargement.

Une question subsidiaire est aussi de fixer la première ligne (lignes des intitulés)

Non plus désolé , pas au seins du même tableau.
par contre tu peux dissocier tes entètes du contenu mais a ce que j'ai pu voir les largeurs varient donc soucis.
La solution serait d'utiliser un bout de code qui récupère tes entètes après chargement , les recréers, on masque les originaux, puis ajoute une div autour de ton tableau , div d'une hauteur fixe pour utiliser le défilement vertical
voila l'algo, si tu as besoins du code fais moi signe

[Manu2.0]

Je te remercie de tes conseils et je vais essayer de voir comment faire.

Je ne faisais pas de chargement du tableau en AJAX. J'essaie actuellement de le faire. J'arrive à le récupérer mais le javascriptque j'avais réalisé par "dynamiser" mon tableau, c'est à dire cacher et montrer des lignes ou des colonnes ne marche plus avec import en AJAX.
Pourtant, si je prend ma page avec le tableau chargé automatiquement dans la div qui devait recueillir mon tableau par AJAX, mon code javascript marche.

Peut être est-ce que l'import via AJAX marque une différence dans la prise en compte des éléments d'une page. Les éléments importés (par AJAX) ne font pas complètement parti du document !

Je cherche...

[le_chomeur]

Peut être est-ce que l'import via AJAX marque une différence dans la prise en compte des éléments d'une page. Les éléments importés (par AJAX) ne font pas complètement parti du document !

non effectivement , ils sont rappatriés mais c'est à toi d'insèrer ces données dans ta pages

[Manu2.0]

Ce que je veux dire, c'est que ma page sans chargement du tableau façon AJAX me permet de jouer sur mes lignes et mes colonnes mais que une autre page avec chargement AJAX du tableau me pose problème dans l'exécution du javascript présent dans le tableau importé (et affiché à l'écran).

J'ai pourtant au final le même code html de la page, la même présentation visuelle, seulement les comportements ne sont pas les mêmes...