PrimeFaces dataTable:如何捕获每页行数事件? [英] PrimeFaces dataTable: how to catch rows-per-page event?

问题描述

我创建了PrimeFaces数据表:

I cretated a PrimeFaces dataTable:

<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,100"值之一，以便下次用户返回此页面时自动出现.当前，它尚未保存，因此，每次(重新)加载页面时，它都返回到默认值"10".

I'd like to save the dropdown box value for rows-per-page. When the user changes the value, how would I catch the event? So I can read and save one of the "5,10,15,20,30,50,100" values in order for this to apear automatically next time the user comes back to this page. Currently, it is not saved, so every time the page is (re)loaded, it goes back to default value of "10".

推荐答案

您可以这样做:

视图

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

}

此处的策略是扩展与分页器呈现的html select 标签关联的onchange事件.为了完成该任务，我已经在数据表( dtVar )中设置了wigetVar，因为它是客户端api，通过 dtVar.paginator.rppSelect 为我们提供了两种选择.

The strategy here is to extend the onchange event associated with the html select tags rendered by the paginator. To facilitate that task, I've set the wigetVar in the datatable (dtVar) knowing that it's clientside api gives us both selects through dtVar.paginator.rppSelect.

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

Now, to be able to send the value on those selects to the managed bean, we can use a remoteCommand. Using the remoteCommand component we can send javascript parameters to a managedbean. I've named the remoteCommand as persistRows and by calling it I've specified the extra parameters using the pattern required by the component: [{name: 'rows', value: this.value}] ([{name: 'nameOfTheVariable', value: 'valueOfTheVariable'}]).

现在，您可以使用该rows属性执行任何操作.

Now you can do whatever you want to do with that rows attribute.

这篇关于PrimeFaces dataTable:如何捕获每页行数事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！