Primefaces : Datatable et colonnes cachées

**denisduval75** · 30/01/2018, 09h00

Bonjour,

J'utilise un datatable du framework primefaces. Celui-ci est composé de 19 colonnes, dont 5 ne sont pas directement visibles (il faut scroller horizontalement pour les voir).

Mon problème : au chargement de la page, ou lorsque j'effectue une action qui nécessite le rafraîchissement du tableau comme trier ou filtrer, un flash écran se produit.

Par contre, si je dimensionne les colonnes afin qu'elles soient toutes visibles sans scroller, il n'y a pas de flash ; mais dans ce cas, le contenu est illisible !

Avez-vous une idée ?

Merci pour votre aide.

Voici la définition du datatable :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
 
                    <p:dataTable id="idRefContributeur" widgetVar="widgetRefContributeur" var="contributeur" style="margin-left:-11px; margin-right:-11px; margin-top:-4px; margin-bottom:-10px"
                                 value="#{contributeurManagerBean.colContributeurFacade.listeColContributeur}" 
                                 rowKey="#{contributeur.idPk}"
                                 scrollable="true" scrollWidth="73%" frozenColumns="1"
                                 selectionMode="multiple"
                                 nullSortOrder="-1"
                                 editable="true" editMode="cell"
                                 resizableColumns="true" 
                                 paginator="true"
                                 paginatorPosition="bottom"
                                 paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {LignesParPage}"
                                 rows="#{contributeurManagerBean.refUtilisateurFacade.lignesPageTabContributeur}">
                        <f:facet name="header">
                            <p:outputLabel value="Liste des contributeurs" style="font-size:1.1em" class="bleu"/>
                        </f:facet>
                        <p:column style="width:224px">
                            <f:facet name="header">
                                <p:commandLink actionListener="#{contributeurManagerBean.trierGroupe()}" update="idRefContributeur">
                                    <p:outputLabel id="idEnteteGroupe" value="Contributeur" style="margin-left:-45px"/>
                                    <pe:tooltip for="idEnteteGroupe" value="Trier" myPosition="right bottom" atPosition="left top"/>
                                </p:commandLink>
                                <p:commandLink actionListener="#{contributeurManagerBean.trierGroupe()}" update="idRefContributeur">
                                    <p:graphicImage id="idTriGroupe" value="#{contributeurManagerBean.triGroupePicto}" style="position:absolute; margin-left:7px"/>
                                    <pe:tooltip for="idTriGroupe" value="Trier" myPosition="right bottom" atPosition="right top" adjustX="-8" adjustY="-2"/>
                                </p:commandLink>
                                <p:commandLink onclick="#{contributeurManagerBean.sauvegarderInformationsContributeur()}" 
                                               oncomplete="PF('widgetFiltreContributeur').show()">
                                    <p:graphicImage id="idFiltreApplique" value="images/#{contributeurManagerBean.filtreContributeurApplique}.png" 
                                                    class="#{contributeurManagerBean.filtreContributeurApplique}" width="20px" style="position:absolute; margin-left:25px"/>
                                    <pe:tooltip for="idFiltreApplique" value="Filtrer" myPosition="left bottom" atPosition="right top" adjustX="-3" adjustY="3"/>
                                </p:commandLink>
                                <p:commandLink actionListener="#{contributeurManagerBean.trierIntitule()}" update="idRefContributeur">
                                    <p:outputLabel id="idEnteteIntitule" value="Intitulé" style="margin-left:60px"/>
                                    <pe:tooltip for="idEnteteIntitule" value="Trier" myPosition="right bottom" atPosition="left top"/>
                                </p:commandLink>
                                <p:commandLink actionListener="#{contributeurManagerBean.trierIntitule()}" update="idRefContributeur">
                                    <p:graphicImage id="idTriIntitule" value="#{contributeurManagerBean.triIntitulePicto}" style="position:absolute; margin-left:7px"/>
                                    <pe:tooltip for="idTriIntitule" value="Trier" myPosition="right bottom" atPosition="right top" adjustX="-8" adjustY="-2"/>
                                </p:commandLink>
                                <p:commandLink onclick="#{contributeurManagerBean.sauvegarderInformationsContributeur()}" 
                                               oncomplete="PF('widgetFiltreIntitule').show()">
                                    <p:graphicImage id="idFiltreAppliqueIntitule" value="images/#{contributeurManagerBean.filtreIntituleApplique}.png" 
                                                    class="#{contributeurManagerBean.filtreIntituleApplique}" width="20px" style="position:absolute; margin-left:25px"/>
                                    <pe:tooltip for="idFiltreAppliqueIntitule" value="Filtrer" myPosition="left bottom" atPosition="right top" adjustX="-3" adjustY="3"/>
                                </p:commandLink>
                            </f:facet>
 
                            <p:fragment rendered="#{contributeur.type == 'GR'}">
                                <div class="backgroundGrisMoyen ligneCadre">
                                    <p:commandLink id="idPlierDeplierGroupe" 
                                                   action="#{contributeurManagerBean.affichagePlierDeplierContributeur(contributeur)}"
                                                   update="idRefContributeur">
                                        <img src="images/#{contributeur.dossierPicto}.png" align="absmiddle" style="margin-top:-2px"/>
                                    </p:commandLink>
                                    <pe:tooltip  for="idPlierDeplierGroupe" value="Plier/déplier" myPosition="right bottom" atPosition="right top" adjustX="-12" adjustY="-2"/>
                                    <p:spacer width="6" height="0"/>
                                    <h:outputText value="#{contributeur.libelle}" class="grisFonce"
                                                  style="#{contributeurManagerBean.affichagePlierDeplierContributeurStyle(contributeur)}; font-weight:bold; margin-left:2px"/>
                                </div>
                            </p:fragment>
                            <p:commandLink id="idDetailLigne" rendered="#{contributeur.type == 'L1' or contributeur.type == 'L2' or contributeur.type == 'L3'}" class="lienBleu" 
                                           action="#{contributeurManagerBean.afficherDetailLigne(contributeur)}"
                                           oncomplete="PF('widgetDetailLigne').show()"
                                           update="form">
                                <h:outputText value="#{contributeur.libelle}" style="margin-left:15px"/>
                            </p:commandLink>
                            <pe:tooltip for="idDetailLigne" value="Détail de la ligne" myPosition="center left" atPosition="center right" adjustX="5"/>
                            <p:fragment rendered="#{contributeur.type == 'T1' or contributeur.type == 'T2'}">
                                <div class="backgroundGrisClair ligneCadre bleu">
                                    <h:outputText value="#{contributeur.libelle}" style="margin-left:35px"/>
                                </div>
                            </p:fragment>
                            <p:fragment rendered="#{contributeur.type == 'T3' or contributeur.type == 'T4'}">
                                <div class="backgroundGrisMoyen ligneCadre bleu">
                                    <h:outputText value="#{contributeur.libelle}" style="margin-left:65px"/>
                                </div>
                            </p:fragment>
                        </p:column>
 
                        <c:forEach items="#{contributeurManagerBean.listeColonneAnnee}" var="annee">
                            <p:column headerText="#{annee}" style="width:76px">
                                <p:fragment rendered="#{contributeur.type == 'GR'}">
                                    <div class="backgroundGrisMoyen ligneCadre">
                                        <h:outputText value="&nbsp;"/>
                                    </div>
                                </p:fragment>
                                <p:cellEditor rendered="#{contributeur.type == 'L1' or contributeur.type == 'L2' or contributeur.type == 'L3'}">
                                    <f:facet name="output">
                                        <div align="right">
                                            <p:outputLabel value="#{contributeurManagerBean.rechercherMontantContributeur(contributeur, annee)}">
                                                <f:convertNumber pattern="###,###,###,##0.00"/>
                                            </p:outputLabel>
                                            <p:outputLabel value="&nbsp;" rendered="#{contributeur.type == 'L2' and annee == contributeurManagerBean.premiereAnnee}"/>                                        
                                            <p:outputLabel value=" %" rendered="#{contributeur.type == 'L2' and annee != contributeurManagerBean.premiereAnnee}"/>
                                        </div>
                                    </f:facet>
                                    <f:facet name="input">
                                        <p:inputText value="#{contributeur.montant}" disabled="#{contributeur.type == 'L2'}" style="font-size: 0.85em">
                                            <f:convertNumber pattern="###,###,###,##0.00"/>
                                            <p:ajax event="blur" listener="#{contributeurManagerBean.modifierMontant(contributeur, annee)}" update="idRefContributeur"/>
                                        </p:inputText>
                                    </f:facet>
                                </p:cellEditor>
                                <p:fragment rendered="#{contributeur.type == 'T1'}">
                                    <div  align="right" class="backgroundGrisClair bleu" style="margin-top:-5px; margin-left:-10px; margin-right:-10px; margin-bottom:-5px; padding-left:10px; padding-top:5px; padding-bottom:3px">
                                        <h:outputText value="#{contributeurManagerBean.rechercherTotalContributeur(contributeur, annee)}" style="margin-right:10px">
                                            <f:convertNumber pattern="###,###,###,##0.00"/>
                                        </h:outputText>
                                    </div>
                                </p:fragment>
                                <p:fragment rendered="#{contributeur.type == 'T2'}">
                                    <div align="right" class="backgroundGrisClair bleu" style="margin-top:-5px; margin-left:-10px; margin-right:-10px; margin-bottom:-5px; padding-left:10px; padding-top:5px; padding-bottom:3px">
                                        <h:outputText value="#{contributeurManagerBean.rechercherTotalContributeur(contributeur, annee)}" style="margin-right:10px">
                                            <f:convertNumber pattern="###,###,###,##0.00 %"/>
                                        </h:outputText>
                                    </div>
                                </p:fragment>
                                <p:fragment rendered="#{contributeur.type == 'T3'}">
                                    <div align="right" class="backgroundGrisMoyen ligneCadre bleu">
                                        <h:outputText value="#{contributeurManagerBean.calculerMontantTotalGeneral(annee)}">
                                            <f:convertNumber pattern="###,###,###,##0.00"/>
                                        </h:outputText>
                                    </div>
                                </p:fragment>
                                <p:fragment rendered="#{contributeur.type == 'T4'}">
                                    <div align="right" class="backgroundGrisMoyen ligneCadre bleu">
                                        <h:outputText value="#{contributeurManagerBean.calculerTauxEvolutionTotalGeneral(annee)}">
                                            <f:convertNumber pattern="###,###,###,##0.00 %"/>
                                        </h:outputText>
                                        <p:outputLabel value="&nbsp;" rendered="#{annee == contributeurManagerBean.premiereAnnee}"/>
                                    </div>
                                </p:fragment>
                            </p:column>
                        </c:forEach>
 
                        <f:facet name="{LignesParPage}">
                            <p:spinner id="idNombreLignes" widgetVar="spinnerNombreLignes" value="#{contributeurManagerBean.refUtilisateurFacade.lignesPageTabContributeur}" min="1" maxlength="3" size="1">
                                <pe:tooltip for="idNombreLignes" value="Lignes par page" myPosition="left bottom" atPosition="right top"/>
                                <p:ajax event="change" listener="#{contributeurManagerBean.enregistrerLignesPage()}" update="form" /> 
                            </p:spinner>
                        </f:facet>

**OButterlin** · 30/01/2018, 15h43

Tu as quelle version de Primefaces ?

**denisduval75** · 30/01/2018, 15h55

Version 6.1

**denisduval75** · 30/01/2018, 16h14

J'ai finalement trouvé la solution sur une autre discussion : encadrer le datatable de table, tr et td comme ceci :

Code :

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

1
2
3
4
5
 
                <table>
                    <tr>
                        <td>
                        <p:dataTable

Et ça marche très bien.

Primefaces : Datatable et colonnes cachées

JSF Java

Discussions similaires

Partager

Partager