底部屏幕上的 Primefaces 数据表分页

Question

我有数据 table 显示我的数据库数据。我在我的数据 table 中添加了 'bottom' 位置的分页。我的代码：

<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}">

因此，这是我的数据 table：

我的分页不在底部屏幕上，而是在我的数据下方。我怎样才能做到这一点？

Answer 1

这是样式问题。使用您的浏览器开发人员工具（F12 在大多数浏览器中）到 select 您想要设置样式的节点。在Chrome中你也可以右击节点然后select"Inspect".

现在找到您需要创建自定义 CSS 规则的 class。在你的情况下：ui-paginator-bottom.

然后创建一些自定义样式。根据您的模板，您最终可能会得到如下内容：

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

另请参阅：

PrimeFaces component looks different than in showcase

底部屏幕上的 Primefaces 数据表分页

Primefaces datatable pagination on bottom screen

html

css

xhtml

primefaces