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:
