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

Question

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

Are you using row or cell edition? Can you post more code about the table? — Aritz, Jan 15 '13 at 15:15

score 62 · Accepted Answer · edited Apr 20 '17 at 15:44

62

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()"/>

edited Apr 20 '17 at 15:44

Kukeltje

12,223
4
24
47

answered Jan 15 '13 at 15:24

Kerem Baydoğan

10,475
1
43
50

1

Kerem, I took what you said in your answer. It worked well. But I have growl Messages that are displayed after each operation. If I use your solution, the growl message disappers asap (1 second). Do you have an idea about this? – Johnny2012 Jan 17 '13 at 12:42
2

`filter()` method creates another update operation. If you are using `autoUpdate="true"` try `autoUpdate="false"` and manually update growl. You can also make it sticky. But remember `autoUpdate="true"` is for simple pages. If you need full control dont use `autoUpdate="true"` – Kerem Baydoğan Jan 17 '13 at 14:10
2

Hi Kerem, some time ago I asked you that question. It worked very well, thanks for it one again. I'm facing now another problem using it. If the selected value (using filter) is a row in page 3 of my datatable and after the operation on the row, the pagination is resetted automatically to Page 1. I want that it keep focus on the page where the selected row was, in this case Page 3. the row is still selected if I go manually to page 3. Do you have an advice on this? – Johnny2012 Mar 01 '13 at 13:56
there is a datatable attribute called "first" with the explanation "Index of the first data to display." I guess that might solve your problem. – Kerem Baydoğan Mar 01 '13 at 15:48
This filter() invokes the server twice and also produces some kind of "ghost effect" because it calls the server once and at the second call it reloads the table again. – Jonathas Pacífico Nov 18 '13 at 17:46
1

Yes you are right, so if you dont want to refresh datatable twice you can only call filter method and remove datatable's id from update attribute of button. As i mentioned before filter() method creates another update operation. – Kerem Baydoğan Nov 19 '13 at 11:21

Al-Mothafar · Answer 2 · 2015-08-12T16:57:02.563

17

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()"/>

edited Aug 12 '15 at 16:57

answered Feb 11 '15 at 14:42

Al-Mothafar

7,949
7
68
102

1

Thanks dude for the update. Jazaka allah khairan bro :) – hamza-don Jun 05 '15 at 19:28

score -2 · Answer 3 · answered Apr 20 '17 at 15:37

-2

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()"/>

answered Apr 20 '17 at 15:37

KIBOU Hassan

381
4
13

I edited this in the answer above (you can propose edits like that to) and it already is in the answer below! – Kukeltje Apr 20 '17 at 15:45

score -6 · Answer 4 · answered Apr 10 '15 at 10:12

-6

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

answered Apr 10 '15 at 10:12

Salvatore Pannozzo Capodiferro

1,121
12
20

is this an answer for this question? my classes always Serializable and i have this issue ! – Al-Mothafar May 27 '15 at 09:24
if you are not implement serialazable the filter will not work – Salvatore Pannozzo Capodiferro Apr 20 '16 at 15:46
of course it is. I hade the same problem and this solution worked. I didn't have the information you were using serializable so I couldn't exclude this solution. – Salvatore Pannozzo Capodiferro Oct 26 '16 at 17:50
lol, do you understand that view (the part controlled with javascript) here is not related to managed bean at all ! if you can give me a really good explanation how "serializable" involved I'll be thankful ! – Al-Mothafar Oct 26 '16 at 20:21
what are you going to show in that view? the model! if you are ignorant just don't vote! – Salvatore Pannozzo Capodiferro Oct 27 '16 at 13:31

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

4 Answers4

Linked

Related