Search code examples
jsfprimefacesdatatablefilteringexpandable-table

How to search from a data table with an expandable row in primefaces?


I have a drop down menu where if I select a name category it shows the respective data table with expanding row option. I want to search as a global way but it does not filtering anything. My managed bean name is showTerm. The category shows:

  • Asian people details
  • European people details

If I select Asian people details, it'll show some person's name and addresses. In a global filter if I give person's name or address it does not filter or show the data.

Here is my code:

<p:dataTable id="datatable" var="term" value="#{showTerm.getTerm()}" widgetVar="dtable"
             emptyMessage="No terminologies found with given criteria" filteredValue="#{term.list}">

        <f:facet name="header">
            <h:outputText value="Search fields:" />
            <p:inputText id="globalFilter" onkeyup="dtable.filter()" style="width:150px" placeholder="Enter keyword"/>
            <p:separator />
            Expand the name to see detailed information
        </f:facet>

        <p:column style="width:16px">
            <p:rowToggler />
        </p:column>

        <p:column headerText="Name: ">
            <h:outputText value="#{term.personName}" />
        </p:column>

        <p:rowExpansion>
            <p:panelGrid  columns="1" columnClasses="label,value" style="width:100%">

                <h:outputText value="Name: #{term.personName}" />
                <h:outputText value="Address: #{term.personAddress}" />

How can I do this? Please help.


Solution

  • You must add the "filterBy" attribute to each column to allow the global filter to filter the data...

        <f:facet name="header">
            <h:outputText value="Search fields:" />
            <p:inputText id="globalFilter" onkeyup="dtable.filter()" style="width:150px" placeholder="Enter keyword"/>
            <p:separator />
            Expand the name to see detailed information
        </f:facet>
    
        <p:column style="width:16px">
            <p:rowToggler />
        </p:column>
    
        <p:column  filterBy="#{term.personName}" headerText="Name: ">
            <h:outputText value="#{term.personName}" />
        </p:column>
    
        <p:rowExpansion>
            <p:panelGrid  columns="1" columnClasses="label,value" style="width:100%">
    
                <h:outputText value="Name: #{term.personName}" />
                <h:outputText value="Address: #{term.personAddress}" 
             />
       </p:rowExpansion>
    

    Check this a globalFilter primefaces ShowCase