CODEWITHSUNDEEP
ajaxjsffilterprimefacesdatatable
Johnny2012
Johnny2012

Reputation: 1532

Ajax update doesn't work, when using filter on p:dataTable

I have a datable which includes the filter feature of primefaces. Some operations can be done on the table (e.g. edit). The datable will be updated after the user's operation is completed using ajax. It updates the table directly and works well, if I don't filter the datatable, unfortunately not if I use it and edit it.

That's how my datatable looks like:

    <p:dataTable id="dataTable" var="row"
                value="#{bean.value}"
                filteredValue="#{bean.filteredValue}"
                paginator="true" rows="25" paginatorPosition="bottom"
                rowKey="${row.id}"
                paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
                editable="true">

and the Button which triggers the update 

<p:commandButton value="Save"
                        actionListener="#{bean.save}"
                        update=":form"/>

Upvotes: 31

Views: 43061

Answers (4)

Kerem Baydoğan
Kerem Baydoğan

Reputation: 10722

After updating datatable you have to invoke it's client side filter() method.

<p:dataTable widgetVar="dataTableWidgetVar" id="dataTable" var="row"
             value="#{bean.value}"
             filteredValue="#{bean.filteredValue}"
             paginator="true" rows="25" paginatorPosition="bottom"
             rowKey="${row.id}"
             editable="true">

<p:commandButton value="Save"
                 actionListener="#{bean.save}"
                 update=":form"
                 oncomplete="PF('dataTableWidgetVar').filter()"/>

For PrimeFaces versions older than 5, you should use 

<p:commandButton value="Save"
                 actionListener="#{bean.save}"
                 update=":form"
                 oncomplete="dataTableWidgetVar.filter()"/>

Upvotes: 63

KIBOU Hassan
KIBOU Hassan

Reputation: 389

For the version of primefaces greater or equal to 5, you can use this block of code, it works very well

<p:dataTable var="page" value="#{yourBean.allData}" widgetVar="yourWidgetVarName"/>

<p:commandButton value="delete"
                 actionListener="#{yourBean.delete}"
                 update="@form"
                 oncomplete="PF('yourWidgetVarName').filter()"/>

Upvotes: -2

Al-Mothafar
Al-Mothafar

Reputation: 8219

Adding answer for Primefaces 5.x , since they changed the way for calling widget var:

Almost same as Kerem Baydogan's answer but with a little modification :

<p:commandButton value="Save"
                 actionListener="#{bean.save}"
                 update="@form"
                 oncomplete="PF('dataTableWidgetVar').filter()"/>

Or you can clear filters at all with :

<p:commandButton value="Save"
                 actionListener="#{bean.save}"
                 update="@form"
                 oncomplete="PF('dataTableWidgetVar').clearFilters()"/>

Upvotes: 17

Salvatore Pannozzo Capodiferro
Salvatore Pannozzo Capodiferro

Reputation: 1259

If you are using the version 5 of primefaces just make the data class that rapresents the single data row, to implements Serializable

Upvotes: -6

Related Questions