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.

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

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 :

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

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

Bonne chance

**OButterlin** · 11/04/2018, 17h07

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.

**johnlobs** · 11/04/2018, 19h09

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 :

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

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

**denisduval75** · 14/04/2018, 07h42

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 :

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

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.

Nom : Captur.PNG
Affichages : 1018
Taille : 11,3 Ko

Nom : Captur.PNG
Affichages : 1018
Taille : 11,3 Ko

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.

**OButterlin** · 14/04/2018, 17h50

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>

**denisduval75** · 20/04/2018, 09h36

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.

**OButterlin** · 20/04/2018, 16h21

Ç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 :

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

1
2
3
4
 
.ui-datatable tbody td{
   padding-right:3px !important;
}

**denisduval75** · 21/04/2018, 06h23

Oui ça marche comme ça.
Merci.

PrimeFaces : Datatable et scroll horizontal

JSF Java

Discussions similaires

Partager

Partager