Deb
Deb

Reputation: 431

Primefaces datatable filter

I've tried a few things but I could not do any work on my filter dataTable. Already follow the example of the primefaces showcase and nothing.

I have the following codes:

xhtml:

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

                <f:facet name="header">  

                    </f:facet> 

                    <p:column 
                        style="max-width: 50px; min-width: 50px; overflow: hidden">
                        <f:facet name="header">
                            <h:outputText value="Contato" />
                        </f:facet>
                        <h:outputText value="#{valor.nomGrupoEmail}" />
                    </p:column>

                    <p:column
                        style="max-width: 50px; min-width: 50px; overflow: hidden">
                        <f:facet name="header">
                            <h:outputText value="Email" />
                        </f:facet>
                        <h:outputText value="#{valor.endEmail}" />
                    </p:column>

                    <p:column
                        style="max-width: 50px; min-width: 50px; overflow: hidden">
                        <f:facet name="header">
                            <h:outputText value="Telefone" />
                        </f:facet>
                        <h:outputText value="#{valor.numTelefone}" />
                    </p:column>

                    <p:column
                        style="max-width: 50px; min-width: 50px; overflow: hidden">
                        <f:facet name="header">
                            <h:outputText value="Ações" />
                        </f:facet>

                    </p:column>


                </p:dataTable>

Bean:

public List<ContatoEmail> getListaContatoEmail() {

        listaContatoEmail = new ArrayList<ContatoEmail>();
        listaContatoEmail = consultaContatoEmail.listarContatoEmail();

        return listaContatoEmail;
    }

I want something that when you type a word in dataTable select the row.

Can someone pass me a simple example.

Since I already appreciate.

Debora

Upvotes: 1

Views: 16990

Answers (2)

maggu
maggu

Reputation: 1199

Ok, here is an example: I'll take the popular example of cars.

Use Case: Dynamically update a data-table upon each keystrokes in auto-complete

My Facelet:

<!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">
<f:view>
    <h:head />
    <h:body>
        <h:form>
            <p:autoComplete var="carac" converter="carconvertor"
                value="#{testBean.selectedCar}" itemLabel="#{carac.carmodel}"
                itemValue="#{carac}"
                completeMethod="#{testBean.complete}" process="@this"
                onSelectUpdate="idGrid">
                <p:ajax event="keyup" listener="#{testBean.onValueChange}"
                    update="idGrid"></p:ajax>
            </p:autoComplete>

            <p:dataTable value="#{testBean.matchingCarModels}" var="carmatch"
                id="idGrid" converter="carconvertor">
                <p:column headerText="Car Model">
                    <h:outputText value="#{carmatch.carmodel}" />
                </p:column>
            </p:dataTable>
        </h:form>
    </h:body>
</f:view>
</html>

A Car POJO

public class Car 
{
    private String carmodel;

    public Car(String carmodel) {
        super();
        this.carmodel = carmodel;
    }
    // Add setters and getters
}

A Car Faces Convertor

@FacesConverter(forClass=Car.class, value="carconvertor")
public class CarConverter 
implements Converter {
    @Override
    public Object getAsObject(FacesContext arg0, UIComponent component, String stringvalue) {
        Car car = new Car(stringvalue);
        return car;
    }

    @Override
    public String getAsString(FacesContext arg0, UIComponent component, Object objectvalue) {
        Car car = (Car) objectvalue;

        if(car == null) {
            return StringUtils.EMPTY;
        }

        return car.getCarmodel();
    }
}

And finally the backing bean

@ManagedBean(name="testBean")
@SessionScoped
public class TestBackingBean 
{
    /**
     * The input filter
     */
    private String filter = StringUtils.EMPTY;

    /**
     * Some test data
     */
    private final List<Car> carModels = new ArrayList<Car>() {
        {
            add(new Car("toyota"));
            add(new Car("honda"));
            add(new Car("suzuki"));
            add(new Car("ford"));
            add(new Car("renault"));
            add(new Car("subaru"));
        }
    };

    /**
     * For updating the grid.
     */
    public void onValueChange(AjaxBehaviorEvent event)
    {
        AutoComplete ac = (AutoComplete) event.getSource();

        Car input = (Car) ac.getValue();

        filter = (input == null) ? StringUtils.EMPTY : input.getCarmodel();
    }

    /**
     * For the auto complete drop down
     */
    public List<Car> complete(String input)
    {
        filter = input;

        return getMatchingCarModels();
    }

    /**
     * get the match
     */
    public List<Car> getMatchingCarModels()
    {
        if(StringUtils.isEmpty(filter))
            return carModels;

        List<Car> matches = new ArrayList<Car>();

        for(Car car : carModels)
        {
            if(car.getCarmodel().startsWith(filter))
            {
                matches.add(car);
            }
        }

        return matches;
    }

    /**
     * The selected car
     */
    private Car selectedCar;
    //Add setters and getters for above member
}

HTH

Upvotes: 3

maggu
maggu

Reputation: 1199

You could see the solution to the same problem in stackoverflow here

As an alternative approach (using auto complete) for the search and capture the keyup event to update the data table. An example tallying to your context:

<p:autoComplete var="address"
    value="#{addressBean.address}" itemLabel="#{address.personName}"
    itemValue="#{address}" completeMethod="#{addressBean.complete}"
    process="@this" converter="personconvertor"
    onSelectUpdate="dataTable">
    <p:ajax event="keyup" listener="#{addressBean.onValueChange}"
        update="dataTable"></p:ajax>
</p:autoComplete>

Upvotes: 1

Related Questions