底部屏幕上的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組件的外觀與展示櫃中的不同