IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JSF Java Discussion :

PrimeFaces : Datatable et scroll horizontal


Sujet :

JSF Java

  1. #1
    Membre éclairé
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    Février 2015
    Messages
    408
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 66
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : Service public

    Informations forums :
    Inscription : Février 2015
    Messages : 408
    Par défaut 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.

  2. #2
    Modérateur
    Avatar de OButterlin
    Homme Profil pro
    Inscrit en
    Novembre 2006
    Messages
    7 313
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 7 313
    Billets dans le blog
    1
    Par défaut
    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...
    });
    N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  3. #3
    Membre éclairé
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    Février 2015
    Messages
    408
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 66
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : Service public

    Informations forums :
    Inscription : Février 2015
    Messages : 408
    Par défaut
    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>

  4. #4
    Modérateur
    Avatar de OButterlin
    Homme Profil pro
    Inscrit en
    Novembre 2006
    Messages
    7 313
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 7 313
    Billets dans le blog
    1
    Par défaut
    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
    N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  5. #5
    Membre expérimenté
    Homme Profil pro
    Consultant informatique
    Inscrit en
    Septembre 2012
    Messages
    170
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Septembre 2012
    Messages : 170
    Par défaut
    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 ....


  6. #6
    Modérateur
    Avatar de OButterlin
    Homme Profil pro
    Inscrit en
    Novembre 2006
    Messages
    7 313
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 7 313
    Billets dans le blog
    1
    Par défaut
    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.
    N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  7. #7
    Membre expérimenté
    Homme Profil pro
    Consultant informatique
    Inscrit en
    Septembre 2012
    Messages
    170
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Septembre 2012
    Messages : 170
    Par défaut
    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

  8. #8
    Modérateur
    Avatar de OButterlin
    Homme Profil pro
    Inscrit en
    Novembre 2006
    Messages
    7 313
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 7 313
    Billets dans le blog
    1
    Par défaut
    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.
    N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  9. #9
    Membre expérimenté
    Homme Profil pro
    Consultant informatique
    Inscrit en
    Septembre 2012
    Messages
    170
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Septembre 2012
    Messages : 170
    Par défaut
    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

    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

  10. #10
    Membre éclairé
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    Février 2015
    Messages
    408
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 66
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : Service public

    Informations forums :
    Inscription : Février 2015
    Messages : 408
    Par défaut
    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

    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.

  11. #11
    Modérateur
    Avatar de OButterlin
    Homme Profil pro
    Inscrit en
    Novembre 2006
    Messages
    7 313
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 7 313
    Billets dans le blog
    1
    Par défaut
    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>
    N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  12. #12
    Membre éclairé
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    Février 2015
    Messages
    408
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 66
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : Service public

    Informations forums :
    Inscription : Février 2015
    Messages : 408
    Par défaut
    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.

  13. #13
    Modérateur
    Avatar de OButterlin
    Homme Profil pro
    Inscrit en
    Novembre 2006
    Messages
    7 313
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 7 313
    Billets dans le blog
    1
    Par défaut
    Ç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;
    }
    N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  14. #14
    Membre éclairé
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    Février 2015
    Messages
    408
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 66
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : Service public

    Informations forums :
    Inscription : Février 2015
    Messages : 408
    Par défaut
    Oui ça marche comme ça.
    Merci.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [DIV][Scroll]Scroll horizontal dans un DIV
    Par Salam59 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 31/03/2006, 11h38
  2. scroll horizontal sur qlq colonnes d'1 tableau ????
    Par nicassy dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 03/02/2006, 12h01
  3. scroll horizontal largeur maximale ?
    Par moque dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 17/01/2006, 14h32
  4. synchroniser le scroll horizontal d'un Tmemo avec un Tedit
    Par bambino3996 dans le forum Composants VCL
    Réponses: 2
    Dernier message: 09/08/2005, 12h06

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo