当rowsPerPage或页面在<p:datatable> </p:datatable>中更改时,如何更新其他组件

时间:2011-09-14 08:52:27

标签: ajax datatable pagination primefaces

我想更新一个组件,显示与primefaces dataTable的当前页面中显示的信息相关的数据,但是我找不到任何关于拦截ajax事件的信息 onRowsPerPageChange或onPageChanged。

有没有办法做到这一点?

使用primefaces 3.0.M3和Glassfish 3.1

这是我的桌子。我想要更新的组件是第一个页脚内的另一个dataTable:

<p:dataTable id="timbrature_dt" 
                                 value="#{timbratureMBean.dataModel}" 
                                 paginator="true"
                                 rows="12" 
                                 lazy="true"
                                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"  
                                 rowsPerPageTemplate="6,12,24" 
                                 currentPageReportTemplate="#{msgs.pagina} {currentPage} #{msgs.of} {totalPages}"
                                 var="tdett"
                                 widgetVar="ttable"
                                 selection="#{timbratureMBean.selezione}" 
                                 selectionMode="single">
                        <p:ajax event="rowSelect" listener="#{timbratureMBean.onRowSelect}"   
                                update="display :timbrature_dt:giustificativi_dt" 
                                oncomplete="timbDialog.show()" />  
                        <f:facet name="header">
                            <h:panelGrid columns="1" columnClasses="columnclass-noborders">
                                <p:outputPanel>
                                    <h:outputText value="#{msgs.dal}:  " />
                                    <p:calendar value="#{timbratureMBean.daData}" 
                                                pattern="dd/MM/yyyy" 
                                                locale="it" 
                                                showButtonPanel="true" 
                                                navigator="true"
                                                mindate="01/01/2003" 
                                                maxdate="#{timbratureMBean.oggi}">
                                        <p:ajax event="dateSelect" listener="#{timbratureMBean.dataChangeListener}" 
                                                update="timbrature_dt :timbrature_dt:giustificativi_dt" /> 
                                    </p:calendar>
                                    <h:outputText value="  #{msgs.al}:  " />
                                    <p:calendar value="#{timbratureMBean.aData}" 
                                                pattern="dd/MM/yyyy" 
                                                locale="it" 
                                                showButtonPanel="true" 
                                                navigator="true"
                                                mindate="01/01/2003" 
                                                maxdate="#{timbratureMBean.oggi}">
                                        <p:ajax event="dateSelect" listener="#{timbratureMBean.dataChangeListener}" 
                                                update="timbrature_dt :timbrature_dt:giustificativi_dt" /> 
                                    </p:calendar>
                                </p:outputPanel>
                                <h:outputText value="#{msgs.timbrature}"/>
                            </h:panelGrid>

                        </f:facet>
                        <p:column>
                            <f:facet name="header">  
                                #{msgs.data_comp}  
                            </f:facet>  
                             <amp:outputData value="#{tdett.sDtComp}"/> 
                        </p:column>

                        <p:column>
                            <f:facet name="header">  
                                #{msgs.data_reale}  
                            </f:facet>  
                             <amp:outputData value="#{tdett.sDtTimb}"/> 
                        </p:column>

                        <p:column>
                            <f:facet name="header">  
                                #{msgs.terminale}  
                            </f:facet>  
                            <h:outputText value="#{tdett.nrTer}"/> 
                        </p:column>

                        <p:column filterBy="#{tdett.eU}" filterOptions="#{timbratureMBean.euOptionList}">
                            <f:facet name="header">  
                                #{msgs.verso}  
                            </f:facet>  
                            <h:panelGroup>
                                <h:outputText value="#{msgs.entrata}" rendered="#{tdett.eU == 'E'}"/> 
                                <h:outputText value="#{msgs.uscita}"  rendered="#{tdett.eU == 'U'}"/> 
                            </h:panelGroup>
                        </p:column>

                        <p:column>
                            <f:facet name="header">  
                                #{msgs.ora_valida}  
                            </f:facet>  
                            <h:outputText value="#{tdett.oraValida}"/> 
                        </p:column>

                        <p:column>
                            <f:facet name="header">  
                                #{msgs.ora_reale}  
                            </f:facet>  
                            <h:outputText value="#{tdett.oraReale}"/> 
                        </p:column>

                        <f:facet name="footer">
                            <p:dataTable id="giustificativi_dt" 
                                         value="#{timbratureMBean.dataList}" 
                                         var="gius"
                                         widgetVar="gtable">
                                <f:facet name="header">
                                    <h:panelGrid columns="1" columnClasses="columnclass-noborders">
                                        <h:outputText value="#{msgs.giustificativi}"/>
                                    </h:panelGrid>

                                </f:facet>
                                <p:column>
                                    <f:facet name="header">  
                                        #{msgs.voce}  
                                    </f:facet>  
                                    <h:outputText value="#{gius.voce}"/> 
                                </p:column>

                                <p:column>
                                    <f:facet name="header">  
                                        #{msgs.dal}  
                                    </f:facet>  
                                    <amp:outputData value="#{gius.sDtIGius}"/> 
                                </p:column>

                                <p:column>
                                    <f:facet name="header">  
                                        #{msgs.al}  
                                    </f:facet>  
                                    <amp:outputData value="#{gius.sDtFGius}"/> 
                                </p:column>

                                <p:column>
                                    <f:facet name="header">  
                                        #{msgs.nr_giorni}  
                                    </f:facet>  
                                    <h:outputText value="#{gius.nrGiorni}"/>
                                </p:column>
                                <p:column>
                                    <f:facet name="header">  
                                        #{msgs.ora_inizio}  
                                    </f:facet>  
                                    <amp:outputNvl value="#{gius.oraIGius}" nullval="-"/>
                                </p:column>
                                <p:column>
                                    <f:facet name="header">  
                                        #{msgs.ora_fine}  
                                    </f:facet>  
                                    <amp:outputNvl value="#{gius.oraFGius}" nullval="-"/>

                                </p:column>
                                <p:column>
                                    <f:facet name="header">  
                                        #{msgs.nr_ore}  
                                    </f:facet>
                                    <amp:outputNvl value="#{gius.nrOre}" nullval="-"/>
                                </p:column>
                                <p:column>
                                    <f:facet name="header">  
                                        #{msgs.nr_minuti}  
                                    </f:facet>
                                    <amp:outputNvl value="#{gius.nrMinuti}" nullval="-"/>
                                </p:column>
                            </p:dataTable> 
                        </f:facet>
                    </p:dataTable> 

                    <p:dialog header="Info" widgetVar="timbDialog" resizable="false"  
                              width="200" showEffect="clip" hideEffect="clip">  

                        <h:panelGrid id="display" columns="2" cellpadding="4">  

                            <h:outputText value="Data:" style="font-weight: bold"/>  
                            <amp:outputData value="#{timbratureMBean.selezione.sDtComp}" />  

                            <h:outputText value="Pausa pranzo ridotta: "  style="font-weight: bold"/>  
                            <h:outputText value="#{timbratureMBean.gestPausaPranzo}" />  

                            <h:outputText value="Timbratura non allineata: "  style="font-weight: bold"/>  
                            <h:outputText value="#{timbratureMBean.timbNonAllineate}" />  

                        </h:panelGrid>  
                    </p:dialog>

1 个答案:

答案 0 :(得分:3)

侯,

有一个更改页面的事件,请参阅此处

http://cagataycivici.wordpress.com/2011/06/10/datatable-hooks/

<p:datatable paginator="true" rows="10" value="#{bean.items}" var="item">
   <p:ajax event="page" listener="#{bean.onPaginate}" update="othercomponents" oncomplete="alert('done')"... />
   ...

虽然我仍然在寻找onChangeRows的事件

但是,我当前的问题只是存储用户选择,实际上页面事件解决了在我所在的页面和选择了多少行的存储。如果 onPaginate 以这种方式实现:

public void onPaginate(PageEvent event){
        logger.info("I am on page:"+event.getPage());
        logger.info("Rows per page set:"+((org.primefaces.component.datatable.DataTable)event.getSource()).getRows());
    }

您可以看到您所在的页面以及选择了多少行。当您更改页面或更改显示的行数时,将触发此事件。