Primefaces Datatable en-tête largeur:automatique

Je suis l'élaboration d'une dynamique Datatable avec Primefaces 5. J'ai mis la largeur de la table de l'auto. C'est vraiment agréable. Ma Colonne n'utilise que le besoin de la largeur, ce qui est parfait. Mais j'utilise aussi paginator et un en-tête de Table. Donc ma table ressemble à ceci:
Primefaces Datatable en-tête largeur:automatique

<p:dataTable var="row"  
             editingRow="#{row.status == CommonConstant.ROWSTATUS_EDIT}" 
             tableStyle="width:auto"
             value="#{componentBean.componentData[componentId].lazyModel}"
             id="#{componentId}" 
             editable="true" scrollable="false" scrollHeight="100%"
             resizableColumns="true"
             paginator="true"
             paginatorPosition="top"
             rowsPerPageTemplate="10 25 50 100"
             lazy="true">
  <f:facet name="header">   
    <p:outputPanel style="text-align:right">  
      <h:commandLink rendered="#{fn:indexOf(componentBean.componentData[componentId].loadedData.actions, CommonConstant.ACTIONTYPE_EXCEL) >= 0}" >
        <img border="0" src="img/excel.png" width="24"/>
        <p:dataExporter type="xls" target="#{componentId}" fileName="#{appDialogId}" />
      </h:commandLink>

      <h:commandLink rendered="#{fn:indexOf(componentBean.componentData[componentId].loadedData.actions, CommonConstant.ACTIONTYPE_PDF) >= 0}">
        <img border="0" src="img/pdf.png" width="24"/>
        <p:dataExporter type="pdf" target="#{componentId}" fileName="#{appDialogId}"/>
      </h:commandLink>

    </p:outputPanel>    

    <p:outputPanel>
      <h:outputText value="#{componentBean.componentData[componentId].loadedData.appdialogid}" />
    </p:outputPanel>                                              
  </f:facet>
...
</p:dataTable>

Comment puis-je forcer l'en-Tête et le paginator la même largeur que celui de la table?

OriginalL'auteur Dominic Weiser | 2014-08-06

9

Pour les données brutes tableau essayez ceci:
```
.ui-datatable {
    display: table;
}

.ui-datatable table {
    table-layout: auto !important;
}
```
Je n'ai pas essayé de redimensionner ou n'importe quoi d'autre encore.

La première moitié de ce qui fonctionne bien pour moi et résout le problème en faisant le paginator de la même largeur que la table. La seconde moitié des causes de la table pour essentiellement overflow:visible; qui vis avec défilement horizontal.
Malheureusement j'ai arrêté de travailler avec PrimeFaces plus d'un an et je ne suis plus en mesure de vous aider. Ma solution a fonctionné en arrière quand je l'ai posté, avec cette version particulière de PrimeFaces. Il est possible que les versions plus récentes ont apporté des changements qui font que ma solution n'est plus applicable. Je suis désolé je ne peux pas être d'aucune aide à cet égard plus.
Pas besoin, seulement de dire que la première moitié est tout ce dont j'avais besoin pour que cela fonctionne en PF 6.0.

OriginalL'auteur Rares Oltean
3

Je suis en supposant que vous êtes réglage de la largeur auto sur le datatable que je peux recréer votre problème.

Essayez ceci:
1. définir le style du min-largeur: $px sur la div avec la ui-datatable classe à une valeur qui rend votre table heureux
2. supprimer le automatique de la largeur de la table et ajouter table-layout: auto ! important à l'élément de la table de sorte colonnes encore auto taille un peu, mais par rapport à l'en-tête.
Remarque: La largeur de l'élément de la table doit rester à 100%, sa valeur par défaut, afin qu'elle remplisse l'en-tête.

Ci-dessous n'est pas vraiment pertinente, mais toujours "bon à savoir".

Toutes les tables de données dans Primefaces 5 utilisation de la table-layout: fixe. Vous pouvez remplacer pour correspondre à l'ancienne Primefaces modèle à l'aide de css.
```
.ui-datatable table, .ui-datatable-resizable table {
    table-layout: auto !important;
}

.ui-datatable-scrollable table {
    table-layout: fixed !important;
}
```
Déroulante tables de données doivent rester fixes.

Cela peut aider si vous retirez le outputPanels et d'utiliser les données de l'exportateur de facettes pour les liens. Si vous préférez les liens dans l'en-tête de les mettre dans un span.

Priemfaces exemple
```
<f:facet name="{Exporters}">
        <h:commandLink> ...
        </h:commandLink> ...
</f:facet>
```
Certains comment cela ne fonctionne pas pour moi. Si j'utilise vos paramètres, j'obtiens le même résultat.
Qu'advient-il si vous supprimez l'exportateur des liens et panneau?
Le paginator panneau de toujours avoir 100% de largeur. J'ai essayé le f:facet name="{Exporters}" construire, mais ne voient pas l'exportateur de boutons plus.
Je peux recréer votre problème et de le résoudre. Espérons que c'est ce que vous voulez.
C'est idéal pour de Petites tables, il fonctionne très bien pour moi. Mais maintenant j'ai un problème avec une table est Plus grande que la Vue. Le paginator reste à 100% et le datatable obtenir un plus grand. Voir le lien

OriginalL'auteur twinj
1

Joindre votre datatable dans une panelGrid
```
<p:panelGrid id="forautowidth" columns="1">
    --- Data Table Here ---
</p:panelGrid>
```
C'est un peu ennuyeux zone autour de la table, mais c'est une bonne affaire mieux que le dépassement paginator. De Plus il fonctionne bien comme le navigateur la page de modification de la taille du

Essayé; ne fonctionne pas.

OriginalL'auteur nbchesed

Vous devez vous connecter pour publier un commentaire.