Primefaces datatable pagination on bottom screen

Question

I have data table that shows my data from database. I include pagination to my data table with 'bottom' position. My 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}">

As result, this is my data table :

My pagination is not on bottom screen, but below my data. How can i achieve that?

Answer 1

It's a matter of styling. Use your browsers developer tools ( F12 in most browsers) to select the node you want to style. In Chrome you can also right click the node and select "Inspect".

Now find the class you need to create a custom CSS rule. In your case: ui-paginator-bottom .

Then create some custom styling. Depending on your template you might end up with something like:

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

See also:

• PrimeFaces component looks different than in showcase