PrimeFaces dataTable：如何捕獲 rows-per-page 事件？

Question

我創建了一個 PrimeFaces 數據表：

<p:dataTable id="locationTable" value="#{bean.object}" var="item"
  paginator="true"
  rows="10" 
  paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink}{LastPageLink} {RowsPerPageDropdown}" 
  rowsPerPageTemplate="5,10,15,20,30,50,100">
  ...
</p:dataTable>

我想保存每頁行的下拉框值。 當用戶更改值時，我將如何捕獲事件？ 所以我可以讀取並保存“5,10,15,20,30,50,100”值之一，以便下次用戶返回此頁面時自動出現。 目前，它沒有保存，因此每次（重新）加載頁面時，它都會返回默認值“10”。

Answer 1

你可以這樣做：

風景

<h:form id="mainForm">

    <p:dataTable id="locationTable" value="#{datatableBean.list}" var="item"
                 paginator="true" widgetVar="dtVar"
                 rows="#{datatableBean.rows}" 
                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                 rowsPerPageTemplate="1,2,3,4,5,6">
        <p:column>
            #{item.name}
        </p:column>
    </p:dataTable>

    <p:remoteCommand name="persistRows" action="#{datatableBean.saveRows}" process="@this" 
                     update="rows" global="false" />

    <h:outputText id="rows" value="#{datatableBean.rows}" />

    <script>
        jQuery(document).ready(function() {
            dtVar.paginator.rppSelect.change(function() {
                persistRows([{name: 'rows', value: this.value}]);
            });
        });
    </script>
</h:form>

豆

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@SessionScoped
public class DatatableBean implements Serializable {

    private int rows;

    private List<SimpleBean> list;

    @PostConstruct
    public void setup() {
        //default rows value
        rows = 2;

        list = new ArrayList<SimpleBean>();
        //ID and Name
        list.add(new SimpleBean(11, "A"));
        list.add(new SimpleBean(22, "B"));
        list.add(new SimpleBean(33, "C"));
    }

    public void saveRows(){
        FacesContext context = FacesContext.getCurrentInstance();
        Map map = context.getExternalContext().getRequestParameterMap();
        String rowsStr = (String) map.get("rows");
        rows = Integer.parseInt(rowsStr);
    }

    public int getRows() {
        return rows;
    }

    public void setRows(int rows) {
        this.rows = rows;
    }

    public List<SimpleBean> getList() {
        return list;
    }

    public void setList(List<SimpleBean> list) {
        this.list = list;
    }

}

這里的策略是擴展與paginator呈現的html 選擇標記關聯的onchange事件。 為了促進這項任務，我在數據表（ dtVar ）中設置了wigetVar，知道它的客戶端api通過dtVar.paginator.rppSelect給我們兩個選擇。

現在，為了能夠將這些選擇的值發送到托管bean，我們可以使用remoteCommand。 使用remoteCommand組件，我們可以將javascript參數發送到managedbean。 我將remoteCommand命名為persistRows並通過調用它使用組件所需的模式指定了額外的參數： [{name：'rows'，value：this.value}] （[{name：'nameOfTheVariable' ，value：'valueOfTheVariable'}]）。

現在，您可以使用該行屬性執行任何操作。

Answer 2

我將此解決方案發布到另一個問題，我正在分享它，因為我希望有人可能會發現實現起來比Daniel更簡單（它仍然教會了我很多關於JQuery的東西！）

我的解決方案是使用Primefaces 5.2.x.

我找到了一種非常簡單的方法來實現它，我遇到的一個問題是，當調用onPaginate（）方法時，它沒有最新的選定值。

所以這就是我所做的，以確保您始終擁有最新的價值，並可以將其保存/加載到數據庫或cookie或其他東西（我們保存到cookie）。

<p:dataTable
        .....
        paginator="true"
        paginatorPosition="bottom"
        paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
        currentPageReportTemplate="Total records: {totalRecords}, showing page {currentPage} of {totalPages}"
        rowsPerPageTemplate="25,50,100"
        rows="#{controller.rowsPerPage}"
        .....
    >
        .....
        <p:ajax event="page" oncomplete="rowsPerPageUpdate()" />
        .....
</p:dataTable>
<p:remoteCommand name="rowsPerPageUpdate" actionListener="#{controller.onPaginate}" />

然后我們的控制器看起來像這樣：

@Dependent
@Named
public class TableController implements Serializable {
    private String rowsPerPage = "25"; //default value
    .....
    public void onPaginate() {
        //save to the cookie
    }
    .....
}

基本上魔術發生在remoteCommand中，它將在ajax事件之后觸發，以確保controller.rowsPerPage已正確更新。

Answer 3

我也在尋找解決方案，在閱讀完這篇文章之后，我發現有一個新的Primefaces功能可以讓你保存數據表的狀態。

因此，對於Primefaces v6.0.10 +，您只需添加multiViewState="true" 。

請注意，這還將在每頁行數旁邊保存過濾器，排序，當前頁面和選擇。

這是此功能的官方演示的鏈接： https ： //www.primefaces.org/showcase/ui/data/datatable/tableState.xhtml

Answer 4

上面寫的（使用Primefaces 7.X測試）的簡單方法是簡單地使用訪問器方法。 該解決方案具有設置實際行數的優點。 否則，在我的情況下，我將獲得之前的行數，在它被更改之前...

<p:dataTable
        .....
        paginator="true"
        paginatorPosition="bottom"
        paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
        currentPageReportTemplate="Total records: {totalRecords}, showing page {currentPage} of {totalPages}"
        rowsPerPageTemplate="25,50,100"
        rows="#{controller.rowsPerPage}"
        .....
    >
        .....
        .....
</p:dataTable>

而bean應該看起來像：

@ViewScoped
@Named
public class Controller implements Serializable {
    private int rowsPerPage = 25; //default value

    public int getRowsPerPage() {
      return rowsPerPage;
    }

    /** Will be called each time the number or selected rows change */
    public void setRowsPerPage(int rows){
      this.rowsPerPage = rows; 
      // Do some other stuff, like using a cache to store the value
    }
}

我個人使用緩存來存儲每個用戶和實體類型的行數。

Answer 5

我有這樣的簡單解決方案

<p:dataTable

.....

<p:ajax event="page" listener="#{yourBean.onPaginate}" />

...
 </p:dataTable>

這是你的豆子

public void onPaginate(PageEvent event)
    {
        String pageSizeParam = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("parameter name");

....

使用“參數名稱”，您可以檢查 F12，網絡選項卡 -> 有效負載