Using Javascript to set default filter in primefaces datatable

Question

I have a Primefaces datatable where one column has a Filter drop down menu. I want to set a default value for the filter on page load. By using filterValue and setting a default value for the option in the backing bean, the value is selected in the menu on page load however the datatable itself isn't actually filtered.

I have tried adding javascript to force the default filter on page load using the below example however it isn't working.

setting default value in primefaces datatable Filter

I have not worked with javascript much so my issue may be there.

JSF Page:

<h:body>
    <h:form>
        <ui:define name="header" >
            <h:outputScript name="common.js" target="body" />
        </ui:define>
    </h:form>


<p:dataTable var="dataItem" value="#{homepageBean.accounts}" 
         filteredValue="#{homepageBean.filterAccounts}" widgetVar="dataTableWidgetVar" >

        <p:column headerText="Status" id="statusCol" filterBy="status" 
                filterOptions="#{homepageBean.menu.statusOption}" 
                filterValue="#{homepageBean.defaultStatus}" >                                   
            <h:outputText value="#{dataItem.status}" />
        </p:column>             

</p:dataTable>      

</h:body

common.js page:

function setDefaultFilter() {
    dataTableWidgetVar.filter();   
}

homepageBean has applicable getters and setters. I am using Primefaces 4.0.

Where are you calling the setDefaultFilter() function? And are you certain that it is firing? — Emil Kaminski

wittakarn wittakarn · Accepted Answer · 2014-09-23T04:55:05

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

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

            <p:column id="carId" 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('carsTable').filter()" styleClass="year-spinner">
                        <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('carsTable').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('carsTable').filter()" panelStyle="width:125px" scrollHeight="150">
                        <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('carsTable').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>
    </h:form>
    <script>
        jQuery(document).ready(function() {
            jQuery('input[id*="globalFilter"]').val('Orange');
            PF('carsTable').filter()
          });
    </script>

This is my group of code which is demonstrated default filter datatable in primefaces 5.0. The original code are appear in primefaces demo datatable filter. Different between developed code and original code are only jquery part. If you use Primefaces 4.0 or newer(5.0), you must use PF('dataTableWidgetVar').filter() instead of dataTableWidgetVar.filter()

<script>
        jQuery(document).ready(function() {
            jQuery('input[id*="globalFilter"]').val('Orange');
            PF('carsTable').filter()
          });
    </script>

Using Javascript to set default filter in primefaces datatable

1 Answers