Primefaces数据表过滤输入键不起作用答案

【问题标题】：Primefaces datatable filtering on enter key not workingPrimefaces数据表过滤输入键不起作用
【发布时间】：2014-06-05 22:38:38
【问题描述】：

我在 primefaces 数据表中添加了一个全局过滤器。当我按 Enter 时，过滤器文本不会发送到服务器进行查询。我的代码如下：

<h:form id="searchResultsForm">
<p:dataTable value="#{searchController.resultItems}"
         var="item" editable="false"
         id="searchResultsTable" lazy="true"
         tableStyleClass="viewedHistoryTable"
         emptyMessage="No items"
         widgetVar="searchResultsTableVar"
         currentPageReportTemplate="({startRecord} - {endRecord} of {totalRecords})"
         paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown} {CurrentPageReport}"
         paginator="true" rows="25" rowsPerPageTemplate="10,25,50,100"   
         rowKey="#{item.abbr}">
<f:facet name="header">
    <p:outputPanel>
        <h:outputText value="Search:" />
        <p:inputText  id="globalFilter" onkeyup="if (event.keyCode === 13){PF('searchResultsTableVar').filter();}" style="width:150px" placeholder="Filter results"/>
    </p:outputPanel>
</f:facet>
<p:column rendered="true">
    <h:outputText value="#{item.title}" />
    <br />
    <h:outputText value="#{item.abbr}" styleClass="searchResultsAbbr" />
</p:column>                                    
</p:dataTable>
</h:form>

如果我删除 if 条件来检查 Enter 的事件键码，则过滤器字符串会在每次按键时发送到服务器。不知道为什么客户端在输入时发送一个空字符串。有什么想法吗？

【问题讨论】：

尝试用searchResultsTableVar.filter();替换PF('searchResultsTableVar').filter();
@Daniel 我看到了同样的行为。过滤器为空。
你用h:form包裹桌子了吗？
是的，数据表是直接的 h:form。我已经用 h:form 编辑了这个问题。
一般来说你必须避免嵌套形式。

标签： jsf primefaces

【解决方案1】：

我想分享我的工作代码：

<h:form id="searchResultsForm">                            
<p:dataTable value="#{searchController.resultItems}"
             var="item" editable="false"
             id="searchResultsTable" lazy="true"
             tableStyleClass="viewedHistoryTable"
             emptyMessage="No items"
             widgetVar="searchResultsTableVar"
             currentPageReportTemplate="({startRecord} - {endRecord} of {totalRecords})"
             paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown} {CurrentPageReport}"
             paginator="true" rows="25" rowsPerPageTemplate="10,25,50,100"   
             rowKey="#{item.abbr}" selectionMode="single" selection="#{searchController.currItem}">
    <f:facet name="header">
        <h:panelGroup>
            <p:outputPanel style="padding-bottom: 4px;">                                        
                <p:inputText  id="globalFilter" onchange="PF('searchResultsTableVar').filter();" style="width:60%;" placeholder="Filter results"/>
                <p:commandButton id="Search" value="Search"  process="@this" update="@this" style="font-size: 0.8em;"/>                                        
            </p:outputPanel>                
        </h:panelGroup>                                                                        
    </f:facet>                                                              
    <p:column rendered="true">
        ......
    </p:column>                                    
</p:dataTable>
</h:form>

【讨论】：

【解决方案2】：

您可以只使用 jquery 附件，因此完全删除“onkeyup”。

$(document).ready(function() {
    $('#globalFilter').keypress(function(event) {

        if ((event.keyCode || event.which) == 13) {
           PF('searchResultsTableVar').filter();
        }
    });
});

在这里测试：http://jsfiddle.net/Zcfga/3/

【讨论】：

感谢您的回复。问题出在“Enter”上，被查询的字符串是一个空字符串。 PrimeFaces 4.0 会发生这种情况，我认为 PrimeFaces 3.4 不会发生这种情况