CODEWITHSUNDEEP
htmlcssprimefacesxhtml
Randyka Yudhistira
Randyka Yudhistira

Reputation: 3652

Primefaces datatable pagination on bottom screen

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 : enter image description here

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

Upvotes: 0

Views: 7882

Answers (1)

Jasper de Vries
Jasper de Vries

Reputation: 20158

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:

Upvotes: 2

Related Questions