Advertise with us

Search Mastertheboss

Our eBooks

Datatables with PrimeFaces

Primefaces Filtered dataTable

Filtering data leverages Primefaces powerful AJAX functionalities by adding text or combo filtering fields.

In order to use filtering on a column, add the parameters filterMatchMode and filterBy to it. If you need to add a Combobox filter, add the additional parameter filterOptions which references a Collection/Array of  SelectItem

Here's an example of it:

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">

<h:head>

</h:head>
<h2>Filtered Datatable</h2>
<h:body>
    <h:form id="jsfexample">
        <p:panelGrid columns="2">
            <f:facet name="header">  
                Basic PanelGrid  
           </f:facet>
            <h:outputLabel for="key" value="Enter key" />
            <p:inputText id="key" value="#{manager.key}" />

            <h:outputLabel for="value" value="Enter value" />
            <p:inputText id="value" value="#{manager.value}" />

            <p:commandButton action="#{manager.save}" update="mydata"
                value="Save" icon="ui-icon-check" style="margin:0" />
            <p:commandButton action="#{manager.clear}" update="mydata"
                value="Delete" icon="ui-icon-cancel" style="margin:0" />

            <h:messages />


        </p:panelGrid>

        <p:dataTable value="#{manager.cacheList}" var="item" id="mydata">
            <p:column style="width:150px" filterMatchMode="contains"
                filterBy="#{item.key}">

                <f:facet name="header">Key</f:facet>
                <h:outputText value="#{item.key}" />

            </p:column>
            <p:column style="width:150px" filterMatchMode="exact"
                filterOptions="#{manager.valueList}" filterBy="#{item.value}">

                <f:facet name="header">Value</f:facet>
                <h:outputText value="#{item.value}" />

            </p:column>

        </p:dataTable>
    </h:form>
</h:body>
</html>

And here's the JSF Bean with just the necessary changes:

public class PropertyManager {
 
    @EJB
    SingletonBean ejb;
    
    ArrayList  cacheList;
    
    // Used for filtering data by filter.xhtml
    static List<SelectItem> valueList = new ArrayList<SelectItem>();
    
    
 // .... All other methods stay the same

    public void save() {
        ejb.put(key, value);
        
        // Adding entry to the Filter Combo box
        valueList.add(new SelectItem(value));
            
    }


}

Here's a snapshot of it:

primefaces datatable

© 2021 mastertheboss.com. All Rights Reserved.

Please publish modules in offcanvas position.