jsf - PrimeFaces 数据表 : how to catch rows-per-page event?

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

你可以这样做:

View

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

bean

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

}

这里的策略是扩展与分页器呈现的 html select 标签关联的 onchange 事件。为了促进这项任务，我在数据表 (dtVar) 中设置了 wigetVar，因为我知道它的客户端 API 通过 dtVar.paginator.rppSelect 为我们提供了两个选择。

现在，为了能够将这些选择的值发送到托管 bean，我们可以使用远程命令。使用remoteCommand 组件，我们可以将javascript 参数发送到托管bean。我将 RemoteCommand 命名为 persistRows ，并通过调用它，我使用组件所需的模式指定了额外的参数:[{name: 'rows', value: this.value }] ([{name: 'nameOfTheVariable', value: 'valueOfTheVariable'}])。

现在您可以使用该 rows 属性执行任何您想要执行的操作。