javascript 使用Javascript在primefaces数据表中设置默认过滤器

Using Javascript to set default filter in primefaces datatable

提问by Stevenyc091

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 filterValueand 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.

我有一个 Primefaces 数据表，其中一列有一个过滤器下拉菜单。我想在页面加载时为过滤器设置默认值。通过filterValue在支持 bean 中使用和设置选项的默认值，在页面加载时在菜单中选择该值，但实际上并未过滤数据表本身。

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

我曾尝试使用以下示例添加 javascript 以强制页面加载时使用默认过滤器，但它不起作用。

setting default value in primefaces datatable Filter

在primefaces数据表过滤器中设置默认值

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

我没有使用过 javascript，所以我的问题可能就在那里。

JSF Page:

JSF页面：

<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:

common.js 页面：

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

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

homepageBean 具有适用的 getter 和 setter。我正在使用 Primefaces 4.0。

采纳答案by wittakarn

<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()

这是我的一组代码，它在 primefaces 5.0 中演示了默认过滤器数据表。原始代码出现在primefaces 演示数据表过滤器中。开发代码和原始代码的区别只是jquery部分。如果您使用 Primefaces 4.0 或更新的 (5.0)，则必须使用PF('dataTableWidgetVar').filter()代替dataTableWidgetVar.filter()

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