Primedafaces datable Paginierung auf dem unteren Bildschirm

Question

Ich habe Datentabelle, die meine Daten aus der Datenbank zeigt. Ich schließe die Seitennummerierung in meine Datentabelle mit der 'unteren' Position ein. Mein Code:

<p:dataTable var="item" id="initemList" widgetVar="initemList" value="#{initemController.initems}" 
       paginator="true" rows="50" reflow="true" 
       paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {CurrentPageReport}" 
       currentPageReportTemplate="{startRecord} - {endRecord} of {totalRecords}" paginatorPosition="bottom" 
       rowsPerPageTemplate="10,25,50" selectionMode="single" scrollable="true" 
       selection="#{initemController.selectedInitem}" rowKey="#{item.itemid}"> 

Als Ergebnis, das ist meine Datentabelle:

Meine Paginierung ist nicht auf unteren Bildschirm, aber unter meinen Daten. Wie kann ich das erreichen?

Answer 1

Es ist eine Frage des Stils. Verwenden Sie die Browser-Entwicklungstools (F12 in den meisten Browsern), um den Knoten auszuwählen, den Sie formatieren möchten. In Chrome können Sie auch mit der rechten Maustaste auf den Knoten klicken und "Prüfen" auswählen.

Suchen Sie jetzt die Klasse, die Sie zum Erstellen einer benutzerdefinierten CSS-Regel benötigen. In Ihrem Fall: ui-paginator-bottom.

Dann erstellen Sie einige benutzerdefinierte Styling. Je nach Ihrer Vorlage können Sie am Ende mit etwas wie:

.ui-paginator-bottom { 
    position: fixed; 
    bottom: 0; 
} 

Siehe auch:

• PrimeFaces component looks different than in showcase