Getting the filtered list in datatable

Question

I am trying to filter a datatable using filter field in the column and get the filtered list (which populates datatable) and update another component (Toplam TL Teminati and Toplam Dolar Teminati) according to the filtered list's values in my page.

Is there anyway to do this in Primefaces 2.2.1 and JSF 2? If not can you rec commend a workaround for this case?

Thanks in advance.

Answer 1

To give you an example of how I achieved custom filter logic in my Primefaces 2.2.1 dataTable, I am giving you a scaled version of my code.

    <p:dataTable value="#{listBeans.beans}" var="bean" dynamic="true" paginator="true" rows="20" paginatorPosition="bottom"
                 emptyMessage="No Beans" loadingMessage="Loading. . ." selectionMode="single" selection="#{listBeans.selectedBean}"
                 id="beanList" widgetVar="beanTable">
        <f:facet name="header">
            <h:panelGrid columns="4">
                <h:outputText value="Bean List" />
                <p:outputPanel>
                    <h:outputText value="Year Filter: " />
                    <h:selectOneMenu value="#{listBeans.yearFilter}"
                        onchange="yearFilterBtn.jq.click(); refreshFilters();">
                        <f:selectItems value="#{listBeans.years}" />

                    </h:selectOneMenu>
                    <p:commandButton id="yearFilterBtn" widgetVar="yearFilterBtn" action="#{listBeans.filterYears}"
                        update="listBeansForm:beanList" style="display:none;" />

                </p:outputPanel>
                <p:outputPanel>
                    <h:outputText value="Filter By Beanchild: " />
                    <p:inputText value="#{listBeans.beanchildFilter}" style="width: 150px; margin-right: 4px;" />
                    <!-- refreshFilters forces the visitor filter to refresh the selection if column filters are selected. -->
                    <p:commandButton oncomplete="refreshFilters();" value="Filter"
                        action="#{listBeans.filterBeanchildren}" update="listBeansForm:beanList" />
                </p:outputPanel>
                <p:commandButton value="Export to XLS" ajax="false">
                    <p:dataExporter target="beanList" type="xls" fileName="BeanReport"
                        excludeColumns="0,5,6" postProcessor="#{listBeans.postProcessExcelReport}" />
                </p:commandButton>
            </h:panelGrid>
        </f:facet>  

        <p:column style="width:16px">
            <p:rowToggler />
        </p:column>
        <p:column filterStyleClass="filtertag" filterBy="#{bean.beanDateDisplay}" filterMatchMode="startsWith">

....
    </p:dataTable>

Without really going into too much detail about the managed bean code, the actions of the command button are essentially passing filter arguments to my BO layer that requery the database for the new list of beans. The explicit update of the dataTable component is needed to refresh the data.

You will notice that on the explicit Beanchild Filter button that is not hidden, I have an oncomplete attribute that references a javascript function called refreshFilters(). I can't remember exactly the problem I had, but I think it is a bug in the 2.2.1 version of Primefaces when a column filter value exists and an asynchronous update occurs within the dataTable itself. Here is the javascript function:

function refreshFilters() {
    var filters = jQuery('.filtertag');
    var uppedOnce = false;
    filters.each(function(idx) {
        var curEl = jQuery(this);
        if (curEl.val() != '') {
            curEl.keyup();
            uppedOnce = true;
        }
    });

    if (!uppedOnce) {
        jQuery(filters[0]).keyup();
    }           
}

You can see here that I am locating every DOM element that has the class filtertag, which would be the column filters. I am saying that if a value exists in that field after the server action is complete, then I am manually triggering a keyup event as this will "refilter" the column with the previous value from before.

I am not sure if it is necessary in later versions of Primefaces, I am not even sure it is necessary now, so I suggest trying to do this without the Javascript workaround and if you run into problems cooridnating the two then you can consider using the Javascript.