PrimeFaces: filter

Wednesday, September 26, 2012

prime faces filter outside datatable

1. The script

2. The filter outside datatable

<p:outputPanel id="searchFilter" >  
        <h:outputText value="Search all fields:" />  
        <p:inputText  id="searchFilter_text" style="width:150px" />  
      </p:outputPanel>

3. Hide the filter inside the data table

<p:outputPanel style="display:none" >  
            <h:outputText value="Search all fields:" />  
            <p:inputText id="globalFilter" onkeyup="carsTable.filter()" style="width:150px" />  
          </p:outputPanel>

------------------------------------------------------------------

Full working primefaces sample example

1. The xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      >

<h:body>
    <h:form>
      <script>
        function searchKeyPressedHandler() {                
          jQuery(document).delegate("#searchFilter input","keyup", function (event) {
            // alert('searchValue');
            var searchValue = document.getElementById('searchFilter_text').value;                
            $("#myTableId\\:globalFilter").val(searchValue);
            $("#myTableId\\:globalFilter").trigger('keyup');   
          });
        }
        searchKeyPressedHandler();
      </script>

<p:outputPanel id="searchFilter" >  
        <h:outputText value="Search all fields:" />  
        <p:inputText  id="searchFilter_text" style="width:150px" />  
      </p:outputPanel>

<p:dataTable  id="myTableId" var="car" value="#{tableBean.carsSmall}" widgetVar="carsTable"   
                    emptyMessage="No cars found with given criteria" filteredValue="#{tableBean.filteredCars}">

<f:facet name="header" >  
          <p:outputPanel style="display:none" >  
            <h:outputText value="Search all fields:" />  
            <p:inputText id="globalFilter" onkeyup="carsTable.filter()" style="width:150px" />  
          </p:outputPanel>  
        </f:facet>

<p:column id="modelColumn" filterBy="#{car.model}"   
                  headerText="Model" footerText="contains"  
                  filterMatchMode="contains">  
          <h:outputText value="#{car.model}" />  
        </p:column>

<p:column id="yearColumn" filterBy="#{car.year}"  
                  headerText="Year" footerText="startsWith">  
          <h:outputText value="#{car.year}" />  
        </p:column>

<p:column id="manufacturerColumn" filterBy="#{car.manufacturer}"   
                  headerText="Manufacturer" footerText="exact"  
                  filterOptions="#{tableBean.manufacturerOptions}"  
                  filterMatchMode="exact">  
          <h:outputText value="#{car.manufacturer}" />  
        </p:column>

<p:column id="colorColumn" filterBy="#{car.color}"  
                  headerText="Color" footerText="endsWith" filterMatchMode="endsWith">  
          <h:outputText value="#{car.color}" />  
        </p:column>  
      </p:dataTable>  
    </h:form>
  </h:body>
</html>

2. The TableBean.java

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.model.SelectItem;

/**
 *
 * @author arun.vc
 */
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import java.util.UUID;

@ManagedBean(name = "tableBean")
@SessionScoped
public class TableBean implements Serializable {

private final static String[] colors;
  private final static String[] manufacturers;

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";

manufacturers = new String[10];
    manufacturers[0] = "Mercedes";
    manufacturers[1] = "BMW";
    manufacturers[2] = "Volvo";
    manufacturers[3] = "Audi";
    manufacturers[4] = "Renault";
    manufacturers[5] = "Opel";
    manufacturers[6] = "Volkswagen";
    manufacturers[7] = "Chrysler";
    manufacturers[8] = "Ferrari";
    manufacturers[9] = "Ford";
  }
  private SelectItem[] manufacturerOptions;
  private List<Car> filteredCars;
  private List<Car> carsSmall;

public TableBean() {
    carsSmall = new ArrayList<Car>();

populateRandomCars(carsSmall, 9);
    manufacturerOptions = createFilterOptions(manufacturers);
  }

private void populateRandomCars(List<Car> list, int size) {
    for (int i = 0; i < size; i++) {
      list.add(new Car(getRandomModel(), getRandomYear(), getRandomManufacturer(), getRandomColor()));
    }
  }

public List<Car> getFilteredCars() {
    return filteredCars;
  }

public void setFilteredCars(List<Car> filteredCars) {
    this.filteredCars = filteredCars;
  }

public List<Car> getCarsSmall() {
    return carsSmall;
  }

private int getRandomYear() {
    return (int) (Math.random() * 50 + 1960);
  }

private String getRandomColor() {
    return colors[(int) (Math.random() * 10)];
  }

private String getRandomManufacturer() {
    return manufacturers[(int) (Math.random() * 10)];
  }

private String getRandomModel() {
    return UUID.randomUUID().toString().substring(0, 8);
  }

private SelectItem[] createFilterOptions(String[] data) {
    SelectItem[] options = new SelectItem[data.length + 1];

options[0] = new SelectItem("", "Select");
    for (int i = 0; i < data.length; i++) {
      options[i + 1] = new SelectItem(data[i], data[i]);
    }

return options;
  }

public SelectItem[] getManufacturerOptions() {
    return manufacturerOptions;
  }
}

Global Filter outside the dataTable example

1. The script

2. The filter outside datatable

<p:outputPanel id="searchFilter" >  
        <h:outputText value="Search all fields:" />  
        <p:inputText  id="searchFilter_text" style="width:150px" />  
      </p:outputPanel>

3. Hide the filter inside the data table

------------------------------------------------------------------

Full working primefaces sample example

1. The xhtml

<p:outputPanel id="searchFilter" >  
        <h:outputText value="Search all fields:" />  
        <p:inputText  id="searchFilter_text" style="width:150px" />  
      </p:outputPanel>

<p:column id="yearColumn" filterBy="#{car.year}"  
                  headerText="Year" footerText="startsWith">  
          <h:outputText value="#{car.year}" />  
        </p:column>

2. The TableBean.java

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.model.SelectItem;

/**
 *
 * @author arun.vc
 */
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import java.util.UUID;

@ManagedBean(name = "tableBean")
@SessionScoped
public class TableBean implements Serializable {

private final static String[] colors;
  private final static String[] manufacturers;

public TableBean() {
    carsSmall = new ArrayList<Car>();

populateRandomCars(carsSmall, 9);
    manufacturerOptions = createFilterOptions(manufacturers);
  }

public List<Car> getFilteredCars() {
    return filteredCars;
  }

public void setFilteredCars(List<Car> filteredCars) {
    this.filteredCars = filteredCars;
  }

public List<Car> getCarsSmall() {
    return carsSmall;
  }

private int getRandomYear() {
    return (int) (Math.random() * 50 + 1960);
  }

private String getRandomColor() {
    return colors[(int) (Math.random() * 10)];
  }

private String getRandomManufacturer() {
    return manufacturers[(int) (Math.random() * 10)];
  }

private String getRandomModel() {
    return UUID.randomUUID().toString().substring(0, 8);
  }

private SelectItem[] createFilterOptions(String[] data) {
    SelectItem[] options = new SelectItem[data.length + 1];

options[0] = new SelectItem("", "Select");
    for (int i = 0; i < data.length; i++) {
      options[i + 1] = new SelectItem(data[i], data[i]);
    }

return options;
  }

public SelectItem[] getManufacturerOptions() {
    return manufacturerOptions;
  }
}