PrimeFaces : Datatable et scroll horizontal

Version imprimable

09/04/2018, 16h47
denisduval75

PrimeFaces : Datatable et scroll horizontal

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.

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:

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... });

10/04/2018, 15h18
denisduval75
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:

1 2 3 4 5 6 <script type="text/javascript"> { var screenWidth = screen.width; } </script>
10/04/2018, 21h09
OButterlin
Comme Primefaces est basé sur jQuery, tu peux faire ceci
Code:

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 ;)

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:

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:

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

sans passer par des fonctions ....

:mouarf:

11/04/2018, 15h44
OButterlin

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.
11/04/2018, 15h57
johnlobs
Bonjour cher ami

J'ai donc pas bien compris le besoin ce qui est comprehensible je pense que les regles du forum stipulent d'alimenter un maximum les nouvelles discussion: ne m'en veux pas ce n'est pas de ma faute.
Code:

1 2 3 4 5 6 .ui-datatable-hor-scroll .ui-datatable-tablewrapper,.scrolling-div .ui-datatable-tablewrapper { overflow: auto; width: 100%; height: 100% padding-bottom: 5px; }
je pense qu'en overflow auto et en travaillant avec des pourcentages ca peux marcher pour ceux qui veulent me donner la chance de m'expliquer
ca ne se fait pas de fixer des tailles car on ne connait jamais les cannaux d'affichage ;bref ce code est à mediter :ptdr::mouarf::aie:

Bonne chance
11/04/2018, 17h07
OButterlin

Bon, pour t'expliquer un cas concret...

J'ai des listes de recherche avec paginator
Je veux afficher un maximum d'enregistrements

Si je mets scrollHeight="500" et que ma taille de fenêtre du navigateur ne permet pas d'afficher ce nombre, je vais me retrouver avec une double barre de scroll => 1 pour la liste, 1 pour la fenêtre

Si au contraire je mets scrollHeight="200" et que ma taille de fenêtre du navigateur me permet d'afficher plus, je vais me retrouver avec du vide sous ma liste => c'est plutôt couillon, j'ai de la place...

Donc calculer la taille disponible est une très bonne solution, qui plus est, pas compliquée à mettre en œuvre alors pourquoi s'en priver ;)

Pour info, le composant ne permet pas de mettre une taille en % pour l'attribut scrollHeight.
11/04/2018, 19h09
johnlobs

Bonjour ,

C'est vrai que j'ai du mal a visualiser,intégrer ton besoin et je m'en excuse.... j'espere que tu ne m'en veux pas.

je ne vois pas pk tu par de scrollHeight je n'ai jamais parler de % j'ai mis le mot "mataille" a part si tu parle du container...Bref
moi je travaille avec du dynamic scrolling et ac marche tres bien

Code:

overflow: auto;

et tu fixe la taille en % du conteneur de ta datatable (div ou bien scrollpanel) ou bien de ta datatable si tu y utilise scrollable

https://stackoverflow.com/questions/...with-scrollbar

Et dsl encore une fois si j'ai pas compris;si c'est le cas tu peux poster ton code que l'on teste tout ca :ptdr::ptdr::ptdr::mouarf:

1 pièce(s) jointe(s)

Bonjour,

Merci pour toutes vos explications; mon problème est résolu mais un autre surgit...

Mon tableau contient des entiers jusqu'à 12 caractères :
Code:

1 2 3 4 <h:outputText value="#{contributeurManagerBean.rechercherTotalContributeur(contributeur, annee)}" style="float: right" class="texteRouge"> <f:convertNumber pattern="###,###,###,##0"/> </h:outputText>
Les colonnes ne sont pas dimensionnées et je n'arrive pas à afficher correctement les valeurs : elles sont tronquées à gauche.

Pièce jointe 370001

Je dois obligatoirement dimensionner les colonnes ?
Mais dans ce cas je perds beaucoup de place si les colonnes contiennent des valeurs avec seulement 3 ou 4 caractères par exemple.

Merci.

14/04/2018, 17h50
OButterlin

Je ne pense pas... encore que, parfois, on a des surprises avec Primefaces et les styles et/ou certaines options (comme le <p:columnGroup> par exemple)

Un truc me parait bizarre dans le code que tu montres... pourquoi style="float:right" ?
Personnellement, je mettrais plutôt style="text-align:right" sur le <p:column>
20/04/2018, 09h36
denisduval75

Bonjour,

Avec text-align: right, l'espace à droite du montant ou taux est plus important et donc trop grand.

Merci à tous pour vos réponses.
20/04/2018, 16h21
OButterlin
Ça c'est normal, par défaut, Primefaces met 10px de padding-right sur la class correspondant au TD d'un datatable.
Si ça pose problème, il faut changer la classe de style (en faire une perso)
Essaye de mettre cette classe dans ta page pour vérifier.
Code:

1 2 3 4 .ui-datatable tbody td{ padding-right:3px !important; }
21/04/2018, 06h23
denisduval75

Oui ça marche comme ça.
Merci.