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

Question

我有数据表，显示我来自数据库的数据。 我将分页添加到数据表的“底部”位置。 我的代码：

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

结果，这是我的数据表：

我的分页不是在底部屏幕上，而是在我的数据下面。 我该如何实现？

Answer 1

这是样式问题。 使用浏览器开发人员工具（大多数浏览器中为F12 ）选择要设置样式的节点。 在Chrome中，您还可以右键单击该节点，然后选择“检查”。

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

然后创建一些自定义样式。 根据您的模板，您可能会得到类似以下内容的结果：

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

也可以看看：

• PrimeFaces组件的外观与展示柜中的不同