Primefaces数据表过滤标题中的特定列答案

【问题标题】：Primefaces datatable filter specific column in headerPrimefaces数据表过滤标题中的特定列
【发布时间】：2018-09-04 17:54:00
【问题描述】：

在Primefaces数据表中，可以通过以下代码过滤特定列：

<p:column filterBy="#{car.id}" headerText="Id" filterMatchMode="contains">
    <h:outputText value="#{car.id}" />
</p:column>

上面的代码将在列的标题上生成一个过滤器。我想要的是在数据表的标题而不是列上创建一个过滤器。来自ShowCase，有一段代码：

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

这将在数据表的标题中放置一个过滤器，但它会过滤数据表的所有字段，这是我不想要的，我希望它只过滤特定列，可以吗？

【问题讨论】：

标签： primefaces jsf-2

【解决方案1】：

您可以使用一些技巧。首先将widgetVar 属性添加到您的p:dataTable，例如widgetVar="myTable"。然后，为您添加一个id 属性p:column：

<p:column filterBy="#{car.id}"
          headerText="Id"
          filterMatchMode="contains"
          id="clm">
  <h:outputText value="#{car.id}" />
</p:column>

您可以使用此 ID 来选择列过滤器字段。在全局过滤器中，您要删除id 属性，并添加一个onkeyup 侦听器，该侦听器在列的过滤器中设置输入值并使用widgetVar 触发对表的过滤。

<f:facet name="header">
  <p:inputText onkeyup="document.getElementById('frm:tbl:clm:filter').value=this.value; PF('myTable').filter();"/>
</f:facet>

这里我假设您的表单的 ID 为 frm，而您的数据表的 ID 为 tbl。它们可能有不同的 ID，因此请相应地更改代码。

如果您不希望过滤器在列中可见，您可以使用 CSS 规则将其隐藏：

.ui-datatable .ui-column-filter[id='frm:tbl:clm:filter'] {
  display: none;
}

如果您使用延迟加载，也可以查看Primefaces lazy datatable: put my own filter instead of GlobalFilter

【讨论】：