How to clear global filter in PrimeFaces DataTable

Question

How can I clear global filter in PrimeFaces DataTable using "Clear" CommandButton? I found similar question on PrimeFaces forum, but looks like not answered - the tip one can find there didn't help me. I tried to solve the problem as follows:

<p:dataTable id="myTab" widgetVar="myTabWidgetVar" var="obj"
    value="#{managedBean.objects}">
    <f:facet name="header">
        <p:outputPanel>
            <h:outputText value="Search all fields:"/>
            <p:inputText id="globalFilter" onkeyup="myTabWidgetVar.filter()"/>
        </p:outputPanel>
    </f:facet>
</p:dataTable>
<p:commandButton value="Clear" onclick="myTabWidgetVar.clearFilters();"
    update="@form"/>

It clears column filters only. Value in global filter remains uncleared. Can you help me to solve the problem?

Answer 1

Here is how:

$("#someFormId\\:myTab\\:globalFilter").val("").keyup();//if you got `prependId="false" , than omit the `someFormId\\:` part from the selector and leave only `myTab\\:globalFilter`

This will fill your filter with empty string and trigger a keyup event , resulting in clearing your filter and clearing the filter state of the table

If you just want to clear the filter without resetting the filter applied to your table use

$("#someFormId\\:myTab\\:globalFilter").val("");

If you want to use this code in a commandButton there is no need to use ajax (update...)

Just use onclick like this

<p:commandButton value="Clear" 
onclick="$('#someFormId\\:myTab\\:globalFilter').val('').keyup(); return false;"/>

use return false; so the button wont submit your page...

Answer 2

<pdataTable  widgetVar="departments" />
<p:commandButton value="#{lang:text('Add department')}"
                 id="....."
                 actionListener="....."
                 update="@form"
                 oncomplete="PF('departments').clearFilters()"
                 styleClass="........."/>

It works in my case for prime faces