Primefaces ajax update

Question

I have primefaces datatable,

<p:panel id="resultpanel">
  <p:dataTable id="tbl" var="job" value="#{report.jobModel}"
               paginator="true" rows="#{report.jobModel.pageSize}"
               paginatorPosition="bottom" lazy="true" scrollable="true"
               resizableColumns="true" rendered="#{!empty report.jobModel}"
               emptyMessage="#{messages['common.datatable.emptymessage']}">

    <p:ajax event="filter" listener="#{report.jobModel.onFilter}"
            update="@form" />

    <p:column sortBy="#{job.detail4}" filterBy="#{job.detail4}">
      <f:facet name="header">
        <h:outputText value="#{messages['content.donejobs.ftdi.datatable.fixedfeecolumn.header']}" />
      </f:facet>
      <h:outputText value="#{job.detail4}">
        <f:converter converterId="KurusLiraConverter"></f:converter>
      </h:outputText>
    </p:column>

    <f:facet name="footer">
      <h:outputFormat value="#{messages['content.donejobs.ftdi.datatable.footer']}">
        <f:param value="#{report.jobModel.rowCount}" />
      </h:outputFormat>

      <p:panel layout="block" style="border: 0px; text-align: center;">
        <p:commandLink ajax="false" title="Download Report">
          <p:graphicImage value="/images/excel.png" />
          <p:fileDownload value="#{report.excelFileOfReportTable}" />
        </p:commandLink>
      </p:panel>
    </f:facet>
  </p:dataTable>
</p:panel>

I want to update the footer part when I filter the table. I have tried to update the footer by putting all the things in the footer in a single panel, giving it an ID, inspecting this ID via firebug, and giving it as a value to the update attribute of the primefaces ajax component. I have also performed this approach, to html outputformat and param components. But no success, lastly I have tried to update the form, this time the whole table has been rendered like a text file. Is there a way to update the table size, after filtering? By the way, I am using primefaces 3.0.RC1-SNAPSHOT, and testing in firefox 7.0.1. Thank you very much for your interest and comment.

Answer 1

There is an open issue for that here and they provide a patch for the dataTable code. My workaround (aka huge hack) doesn't require touching the primefaces codebase, which I prefer. I tested it for the events below, but I can't see why it wouldn't work for the rowEdit event.

<p:remoteCommand name="updateFilters" update="table:totalid"></p:remoteCommand>
<p:dataTable id="tabelaMunicipio" value="#{bean.model}" ...>
<p:ajax event="page" oncomplete="updateFilters()"/>
<p:ajax event="filter" oncomplete="updateFilters()"/>   
<p:ajax event="sort" oncomplete="updateFilters()"/>
<p:column headerText="#{msg['id']}" sortBy="#{id}"> 
   <h:outputText value="#{item.id}"></h:outputText>  
   <f:facet name="footer"> 
      <h:outputText value="#{bean.model.totals['id']}" id="totalid"/> 
   </f:facet> 
</p:column> 
...
</p:dataTable>

Yes, I use a p:remoteCommand (invoked by the oncomplete client-side hook in p:ajax) to update the components inside the footer row. This causes a tiny delay on the footer update in comparison to the data itself, but I can live with that.