更新 PrimeFaces 数据表标头中的输入（仅限 JavaScript）

Question

我们有一个PrimeFaces

<h:form id="content-form">

    ...

    <p:dataTable id="fixed-data"
                 widgetVar="resultTable"
                 value="#{resultManager.dataModel}"
                 filteredValue="#{resultManager.filteredEntities}"
                 var="result"
                 rowKey="#{result.id}"
                 selectionMode="multiple"
                 selection="#{resultManager.selectedEntities}"
                 paginator="true"
                 paginatorPosition="bottom"
                 paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                 rows="#{resultManager.selectedRowsPerPage}"
                 scrollable="true"
                 scrollHeight="200"
                 rowsPerPageTemplate="25,50,100,200"
                 resizableColumns="true"
                 emptyMessage="#{msg['common.action.search.noResultsMessage']}">

        <p:ajax event="rowSelect" ... />
        <p:ajax event="rowUnselect" ... />
        <p:ajax event="sort" ... />

        <f:facet name="header">
            <h:panelGroup id="header-facet-panel"
                          layout="block">

                <p:inputText id="filterInput"
                             widgetVar="resultTableFilterInput"
                             onkeypress="if (event.keyCode == 13) { filter(); return false; }" />
                <p:commandButton id="search-btn"
                                 icon="ui-icon bx-icon-search"
                                 ... />

            </h:panelGroup>
        </f:facet>

        <p:column ... />
        <p:column ... />
        .
        .
        .

它呈现为:

正如你所看到的，我过滤了詹姆斯。因此，仅显示具有该值的行。

如果您看一下左下方，还有一个树状结构，用户可以单击它，这样您就只能看到那些在节点过滤标准之后的内容(右边的数据表会被更新)。

我们现在有两种可能性：

1. 调用＜code＞dataTable.filter（）
2. 删除

调用< code > datatable . filter()；工作，不幸的是，管理层决定重置/删除输入字段

        <p:inputText id="filterInput"
                     widgetVar="resultTableFilterInput"
                     onkeypress="if (event.keyCode == 13) { filter(); return false; }" />

它没有JSFvalue=“…”属性。

这是

    <p:tree id="tree"
            widgetVar="explorerTree"
            value="#{resultManagerExplorer.rootNode}"
            var="criterion"
            selectionMode="single"
            selection="#{resultManagerExplorer.selectedNode}">

        <p:ajax event="select"
                update=":content-form:fixed-data :content-form:result-sub-panel :content-form:growl"
                onstart="$( 'content-form:fixed-data:filterInput' ).attr( 'value', '' ); resultTableFilterInput.value = '';"
                oncomplete="resultTable.getPaginator().setPage(0); $( 'content-form:fixed-data:filterInput' ).attr( 'value', '' ); resultTableFilterInput.value = '';" />

然而，这对没有任何作用

<input aria-readonly="false"
       aria-disabled="false"
       role="textbox"
       id="content-form:fixed-data:filterInput"
       name="content-form:fixed-data:filterInput"
       value="James"
       size="70"
       onkeypress="if (event.keyCode == 13) { filter(); return false; }"
       class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all"
       type="text">

（以上是 Firefox 调试工具在树节点点击后输出的 HTML）

问题：

出了什么问题以及如何使其工作（无需为输入添加 JSF 值，例如

注意，有一个对(正确的)datatable组件的更新，DOM ID < code >:content-form:fixed-data 。




Answer 1

你忘了用#开始你的jQuery选择器字符串：

$('#content-form:fixed-data:filterInput')

此外，您可能需要转义冒号：

$('#content-form\\:fixed-data\\:filterInput')

检查您是否真的找到了输入：

console.log($('#content-form\\:fixed-data\\:filterInput'));