PrimeFaces : Datatable et scroll horizontal

**denisduval75** · 09/04/2018, 16h47

Bonjour,

J'utilise un Datatable du framework PrimeFaces.
Le tableau est constitué de 19 colonnes, et les 5 dernières sont visibles en scrollant.

Vue la résolution que j'utilise et pour un affichage proche de toute la largeur de l'écran, je dois définir le scroll du tableau à 86%
Mais bien sûr le scroll à 86% ne convient plus dès que je change de résolution ou d'écran.

Comment peut-on résoudre ce genre de problème ?
En fait je cherche une solution 'dynamique' pour toujours utiliser toute la largeur de l'écran et quelque soit l'écran et sa résolution, mais sans avoir à préciser la taille du scroll.

Merci pour votre aide.

**OButterlin** · 10/04/2018, 12h48

Je ne suis pas sûr de comprendre le problème pour ce qui est de la largeur du tableau dans la mesure où le tableau utilise par défaut la largeur de l'écran.
Il suffit d'avoir au moins une colonne sans largeur pour que l'affichage s'adapte.

J'ai le problème pour la hauteur de la partie scrollable mais bon, c'est différent...
Ceci dit, j'utilise un calcul dynamique lié à l'évènement "resize" de la fenêtre pour adapter mes listes, peut-être que tu pourras t'en inspirer pour ton problème.
Dans la partie <script> de ta page (dans <head> de préférence)

Code :

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

1
2
3
4
5
6
7
 
$(window).resize(function() {
 
   // ici tu adaptes la largeur ou la hauteur de ton datatable...
   // Pour avoir la largeur disponible de la fenêtre, en jQuery ce serait $(window).innerWidth()
   // ou $(window).innerHeight() pour la hauteur...
});

**denisduval75** · 10/04/2018, 15h18

OK merci beaucoup pour l'info.

Mais comme je ne suis vraiment pas doué en Js JQuery...
J'ai ce script dans le head de ma page, mais je ne sais pas comment faire ensuite pour redimensionner le tableau !
En fait, je voudrais ôter 243px à la largeur du screen.width puis 'updater' mon tableau.

Code :

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

1
2
3
4
5
6
 
        <script type="text/javascript">
            {
                var screenWidth = screen.width;
            }
        </script>

**OButterlin** · 10/04/2018, 21h09

Comme Primefaces est basé sur jQuery, tu peux faire ceci

Code :

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

1
2
3
 
var width = parseInt($(window).innerWidth()) - 243;
$("[id='form1:datatable1']").width(width);

en supposant que ton datatable ait pour ID "form1:datatable1"... je te laisse adapter

**johnlobs** · 11/04/2018, 15h24

Bonjour ,

les datatable, de primefaces implémentent déjà beaucoup de fonctionnalités que tu peux adapter en fonction de ton besoin.
J'aurais aimé voir un peu de code mamis bon;tu peux faire un truc comme ca pour eviter de scroller:

Code :

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

1
2
3
4
5
6
7
 
                              <p:dataTable selectionMode="single" id="tabl"
	                        styleClass="TonStyle-table" rowKey="#{tonObjet.iD}" lazy="true"
				var="tonObjet"
				value="#{tonController.tonObjetLazyDataModel}" rows="10"
				paginator="true" paginatorPosition="bottom"
				paginatorTemplate=" {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}">

Ceci permettra de fixer le nombre de ligne a 10 et de permettre la pagination;pour les colonnes il faut fixer la taille de certaines colonnes dont les donnée a afficher prennent de l'espace et les autres tu les laisse et ça se fixera tout seul normalement.
Voila!!
Par contre si tu veux implementer ton scroll tu fixe la taille de ta datatable et tu met un scroll en auto ou bien tu utilise

Code :

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

scrollHeight="ta taille" scrollWidth="ta taille"

sans passer par des fonctions ....

**OButterlin** · 11/04/2018, 15h44

Tu n'as pas compris le besoin...
La taille de la zone de scroll dépend de la taille disponible dans la fenêtre, si tu réduis la fenêtre, la zone se réduit... dans le cas contraire, elle s'agrandit.

Bref, ce ne sont pas des données fixes mais variables, on doit donc les calculer à l'affichage initial de la page et à chaque redimensionnement de la fenêtre.

PrimeFaces : Datatable et scroll horizontal

JSF Java

Vue hybride

Discussions similaires

Partager

Partager