DataTable - Filter
Filtering updates the data based on the constraints.
Documentation
<style type="text/css">
.ui-datatable {
margin-bottom: 25px
}
.ui-datatable .ui-datatable-header {
text-align: right !important;
}
.ui-button-text-only .ui-button-text {
padding: 0.3em 0.4em;
}
.ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-header .ui-chkbox {
visibility: hidden;
}
.ui-filter-column .ui-column-customfilter .custom-filter {
width: 100%;
box-sizing: border-box;
}
.year-spinner input {
width: 100%;
box-sizing: border-box;
}
</style>
<h:form>
<p:dataTable var="car" value="#{dtFilterView.cars1}" widgetVar="carsTable1"
emptyMessage="No cars found with given criteria" filteredValue="#{dtFilterView.filteredCars1}">
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search all fields:" />
<p:inputText id="globalFilter" onkeyup="PF('carsTable1').filter()" style="width:150px" placeholder="Enter keyword"/>
</p:outputPanel>
</f:facet>
<p:column filterBy="#{car.id}" headerText="Id" footerText="contains" filterMatchMode="contains">
<h:outputText value="#{car.id}" />
</p:column>
<p:column filterBy="#{car.year}" headerText="Year" footerText="lte" filterMatchMode="lte">
<f:facet name="filter">
<p:spinner onchange="PF('carsTable1').filter()" styleClass="year-spinner custom-filter">
<f:converter converterId="javax.faces.Integer" />
</p:spinner>
</f:facet>
<h:outputText value="#{car.year}" />
</p:column>
<p:column filterBy="#{car.brand}" headerText="Brand" footerText="exact" filterMatchMode="exact">
<f:facet name="filter">
<p:selectOneMenu onchange="PF('carsTable1').filter()" styleClass="custom-filter">
<f:selectItem itemLabel="Select One" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{dtFilterView.brands}" />
</p:selectOneMenu>
</f:facet>
<h:outputText value="#{car.brand}" />
</p:column>
<p:column filterBy="#{car.color}" headerText="Color" footerText="in" filterMatchMode="in">
<f:facet name="filter">
<p:selectCheckboxMenu label="Colors" onchange="PF('carsTable1').filter()" scrollHeight="150" styleClass="custom-filter">
<f:selectItems value="#{dtFilterView.colors}" />
</p:selectCheckboxMenu>
</f:facet>
<h:outputText value="#{car.color}" />
</p:column>
<p:column filterBy="#{car.sold}" headerText="Status" footerText="equals" filterMatchMode="equals">
<f:facet name="filter">
<p:selectOneButton onchange="PF('carsTable1').filter()" styleClass="custom-filter">
<f:converter converterId="javax.faces.Boolean" />
<f:selectItem itemLabel="All" itemValue="" />
<f:selectItem itemLabel="Sold" itemValue="true" />
<f:selectItem itemLabel="Sale" itemValue="false" />
</p:selectOneButton>
</f:facet>
<h:outputText value="#{car.sold ? 'Sold': 'Sale'}" />
</p:column>
<p:column filterBy="#{car.price}" headerText="Price" footerText="custom (min)" filterFunction="#{dtFilterView.filterByPrice}">
<h:outputText value="#{car.price}">
<f:convertNumber currencySymbol="$" type="currency"/>
</h:outputText>
</p:column>
</p:dataTable>
<p:dataTable var="car" value="#{dtFilterView.cars2}" widgetVar="carsTable2"
emptyMessage="No cars found with given criteria" filteredValue="#{dtFilterView.filteredCars2}"
globalFilterFunction="#{dtFilterView.globalFilterFunction}">
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search all fields using globalFilterFunction:" />
<p:inputText id="globalFilter" onkeyup="PF('carsTable2').filter()" style="width:150px" placeholder="Enter keyword"/>
</p:outputPanel>
</f:facet>
<p:column headerText="Id">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color">
<h:outputText value="#{car.color}" />
</p:column>
<p:column headerText="Status">
<h:outputText value="#{car.sold ? 'Sold': 'Sale'}" />
</p:column>
<p:column headerText="Price">
<h:outputText value="#{car.price}">
<f:convertNumber currencySymbol="$" type="currency"/>
</h:outputText>
</p:column>
</p:dataTable>
</h:form>
@Named("dtFilterView")
@ViewScoped
public class FilterView implements Serializable {
private List<Car> cars1;
private List<Car> cars2;
private List<Car> filteredCars1;
private List<Car> filteredCars2;
@Inject
private CarService service;
@PostConstruct
public void init() {
cars1 = service.createCars(10);
cars2 = service.createCars(10);
}
public boolean filterByPrice(Object value, Object filter, Locale locale) {
String filterText = (filter == null) ? null : filter.toString().trim();
if (filterText == null || filterText.equals("")) {
return true;
}
if (value == null) {
return false;
}
return ((Comparable) value).compareTo(getInteger(filterText)) > 0;
}
public boolean globalFilterFunction(Object value, Object filter, Locale locale) {
String filterText = (filter == null) ? null : filter.toString().trim().toLowerCase();
if (filterText == null || filterText.equals("")) {
return true;
}
int filterInt = getInteger(filterText);
Car car = (Car) value;
return car.getId().toLowerCase().contains(filterText)
|| car.getBrand().toLowerCase().contains(filterText)
|| car.getColor().toLowerCase().contains(filterText)
|| (car.isSold() ? "sold" : "sale").contains(filterText)
|| car.getYear() < filterInt
|| car.getPrice() < filterInt;
}
private int getInteger(String string) {
try {
return Integer.valueOf(string);
}
catch (NumberFormatException ex) {
return 0;
}
}
public List<String> getBrands() {
return service.getBrands();
}
public List<String> getColors() {
return service.getColors();
}
public List<Car> getCars1() {
return cars1;
}
public List<Car> getCars2() {
return cars2;
}
public List<Car> getFilteredCars1() {
return filteredCars1;
}
public void setFilteredCars1(List<Car> filteredCars1) {
this.filteredCars1 = filteredCars1;
}
public List<Car> getFilteredCars2() {
return filteredCars2;
}
public void setFilteredCars2(List<Car> filteredCars2) {
this.filteredCars2 = filteredCars2;
}
public void setService(CarService service) {
this.service = service;
}
}
@Named
@ApplicationScoped
public class CarService {
private final static String[] colors;
private final static String[] brands;
static {
colors = new String[10];
colors[0] = "Black";
colors[1] = "White";
colors[2] = "Green";
colors[3] = "Red";
colors[4] = "Blue";
colors[5] = "Orange";
colors[6] = "Silver";
colors[7] = "Yellow";
colors[8] = "Brown";
colors[9] = "Maroon";
brands = new String[10];
brands[0] = "BMW";
brands[1] = "Mercedes";
brands[2] = "Volvo";
brands[3] = "Audi";
brands[4] = "Renault";
brands[5] = "Fiat";
brands[6] = "Volkswagen";
brands[7] = "Honda";
brands[8] = "Jaguar";
brands[9] = "Ford";
}
public List<Car> createCars(int size) {
List<Car> list = new ArrayList<Car>();
for(int i = 0 ; i < size ; i++) {
list.add(new Car(getRandomId(), getRandomBrand(), getRandomYear(), getRandomColor(), getRandomPrice(), getRandomSoldState()));
}
return list;
}
private String getRandomId() {
return UUID.randomUUID().toString().substring(0, 8);
}
private int getRandomYear() {
return (int) (Math.random() * 50 + 1960);
}
private String getRandomColor() {
return colors[(int) (Math.random() * 10)];
}
private String getRandomBrand() {
return brands[(int) (Math.random() * 10)];
}
private int getRandomPrice() {
return (int) (Math.random() * 100000);
}
private boolean getRandomSoldState() {
return (Math.random() > 0.5) ? true: false;
}
public List<String> getColors() {
return Arrays.asList(colors);
}
public List<String> getBrands() {
return Arrays.asList(brands);
}
}
