Datatables with PrimeFaces

Page 4 of 5

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

0
0
0
s2sdefault