Question

I am creating a dataTable with filters where the filters can be displayed/hidden using a selectBooleanButton. I am able to hide the text filters, but the select box for ‘exact’ filter does not hide. Code is given below. I would appreciate any help.

<p:dataTable id="orgs" var="id" widgetVar="idTable"
value="#{orgList.ids}" rows="10"
rowKey="#{id.idPk}"
paginator="true" paginatorPosition="top" 
selectionMode="single" 
selection="#{orgList.selectedOrg}"
filteredValue="#{orgList.filteredValues}"
>

<f:facet name="header">
    <p:toolbar id="orgListToolbar">
        <p:toolbarGroup align="right">
            <p:selectBooleanButton value="#{orgList.showFilter}" onIcon="myfilter" offIcon="ui-icon-minusthick" onLabel="F" offLabel="F">
                <p:ajax update="orgs" oncomplete="idTable.clearFilters()"/>
            </p:selectBooleanButton>
        </p:toolbarGroup>
    </p:toolbar>
</f:facet>


<p:column sortBy="#{id.id}" headerText="Id" filterBy="#{id.id}" filterStyle="#{orgList.showFilter?'':'display: none; visibility: hidden;'}">
    <h:outputText value="#{id.id}" />
</p:column>
<p:column sortBy="#{id.idCls.clsName}" headerText="Id Type"             
        filterBy="#{id.idCls.clsName}" filterMatchMode="exact" filterOptions="#{commonLists.selectItemIdClses}" 
        filterStyle="#{orgList.showFilter?'':'display: none; visibility: hidden;'}" >
    <h:outputText value="#{id.idCls.clsName}" />
</p:column>

Answer 1

That’s because Primefaces overrides your filterStyle

You can do the following :

In your custom css file add the following (id is your table id)

#id .ui-column-filter{
 display:none;
}

make sure you include your css in the end… (You can load the css in the body) like this

<h:body>
    <h:outputStylesheet library="css" name="myCssFile.css" target="head" />

Note that display: none; is enough , no need for the visibility: hidden; at all

---

In order to hide / show the filters you can use jQuery .hide() / .show() functions with the proper selectos

For example :

$("#form\\:dataTable th select").hide();//.show

$("#form\\:dataTable th input").hide();//.show

Check it in DataTable – Filtering (in console of your browser developer tools)