CODEWITHSUNDEEP
jsfjakarta-eeprimefacesfilterdatatable
Jalal Sordo
Jalal Sordo

Reputation: 1675

Global <p:datatable> filter with <p:selectOneMenu> won't work

i'm trying to implement a global filter on a datatable that i have on my jsf page. the input text filter works fine with the following code :

<p:inputText id="globalFilter" onkeyup="examTable.filter();" style="width:200px" />

but when i try the same approach with the SelectOneMenu component , it won't work.

i have tried this code :

<p:selectOneMenu id="state" value="#{examenListBean.stateOption}"onchange="examTable.filter();"> 

      <f:selectItems value="#{examenListBean.etatExamOptions}"/> 

</p:selectOneMenu>

but with no avail.

here's my p:datatable tag:

 <p:dataTable id="tabexam"
              paginatorPosition="bottom"
              var="exam"
              value="#{examenListBean.listexam}"
              widgetVar="examTable"
              emptyMessage="Aucun résultat n'a été trouvé avec les critères donnés"
              filteredValue="#{examenListBean.filteredexams}"
              paginator="true"
              rows="30" 
              paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
              rowsPerPageTemplate="5,10,15,30"
              resizableColumns="true">

Upvotes: 1

Views: 4336

Answers (2)

VeenarM
VeenarM

Reputation: 1263

I've had the same issues, and it seems to just be that primefaces doesn't allow it type of thing. My end goal is being able to move the 'selectOneMenu' tables out of the columns and put them in the headers, but at the moment here is what I have done.

It's due to the way that primefaces seems to access it's structures preparing them to be ready for the filters.

What I have done is created a 'hidden' p:inputText field with id = 'globalFilter' and made id display:none...

Then created 2 search fields (One using a selecOneMenu and one just a inputText field). Then used the onchange or onkeyup functions of those types to call my javascript functions which use jQuery to update the hidden filed to the value selected and then call the crpTable feature.

<script type="text/javascript">

        function doFilter1()
        {
            $("#globalFilter").val($("#globalFilter1").val());
            widgetVarTableId.filter();
        };
        function doFilter2()
        {
            $("#globalFilter").val($("#globalFilter2").val());
            widgetVarTableId.filter();
        };

</script>

<style>
   .myGlobalFilter {
      display:none;       
   }

</style>

Inside my f:facet name=Header i have

<p:inputText id="globalFilter" styleClass="myGlobalFilter"/>

<h:outputText value="filter one: "/>
<h:selectOneMenu id="globalFilter1" onchange="doFilter1();">
   <f:selectItems value="#{formBean.filterOptions}" />
</h:selectOneMenu>

<h:outputText value="filter two: "/>
<p:inputText id="globalFilter2" onkeyup="doFilter2();">

This works as I expect.. however short coming of using the primefaces .filter()- is that you can't change it to be 'exact' 'startsWith' etc, it's always 'contains' with out modifying PF source code.

Hope this helps!

Upvotes: 2

Kuba
Kuba

Reputation: 2089

Try filtering on the server side maybe:

<p:selectOneMenu id="state" value="#{examenListBean.stateOption}"> 
            <f:selectItems value="#{examenListBean.etatExamOptions}"/> 
            <p:ajax event="change" process="@this" listener="#{myBean.filteringMethod}" update=":absPath:tabexam"/>
</p:selectOneMenu>

Don't know how your JavaScript Method looks like, maybe try using <p:remoteCommand> and update your table there.

Upvotes: 2

Related Questions