如何在数据表列标题的过滤框中添加占位符文本答案

【问题标题】：how to add placeholder text in the filter box in datatable column headers如何在数据表列标题的过滤框中添加占位符文本
【发布时间】：2012-10-12 16:50:35
【问题描述】：

我有一个包含几列的主要面孔数据表，并且所有列都有 filteryBy 属性。如何添加占位符或水印为用户提供提示。任何建议，将不胜感激谢谢！

<p:dataTable var="dt" widgetVar="widgetUserRecords"
                             value="#{userBean.result}"
                             id="userRecordTable" paginator="true"
                             paginatorAlwaysVisible="false" rows="10"
                             height="300" >
<p:column sortBy="#{dt.course.name}" filterStyle="width:50px;"
                              filterBy="#{dt.course.name}" headerText="Course Name" style="text-align:bottom">
    <h:outputText value="#{dt.course.name}"/>
</p:column>
.
. 
.
  (other columns)
</p:dataTable>

【问题讨论】：

标签： filter datatable primefaces jquery-tooltip

【解决方案1】：

我意识到这个问题早在 2012 年就被问到了，但我希望这个答案可以帮助那些希望在数据表中按字段过滤添加水印的人。我尝试使用forElement 的其他答案中建议的解决方案，但无法显示水印。相反，我找到了两个使用for 属性的解决方案，第一个使用p:column 元素上的styleClass 属性，第二个使用for 属性中的jQuery 选择器。我还发现p:watermark 元素需要位于用于标题的f:facet 元素内。

我在这两个解决方案中使用的代码如下：

<h:form id="myForm">
    <p:dataTable id="myTable">

        <p:column id="column1" filterBy="column1" styleClass="watermark1">
            <f:facet name="header">
                <p:watermark for="@(.watermark1)" value="Watermark 1" />
                <h:outputText value="Column1" />
            </f:facet>
        </p:column>

        <p:column id="column2" filterBy="column2">
            <f:facet name="header">
                <p:watermark for="@(#myForm\\:myTable\\:column2\\:filter)"
                    value="Watermark 2" />
                <h:outputText value="Column2" />
            </f:facet>
        </p:column>

    </p:dataTable>
</h:form>

【讨论】：

+1，这应该被标记为正确答案。在 PrimeFaces 5.1 中，我从高处和低处搜索，然后偶然发现这篇文章，终于让它工作了。我不得不说我在表单上设置了 'prependId="false"'，所以对我来说，@(#myTable\\:column2\\:filter) 就足够了。 YMMV。

【解决方案2】：

首先为您的列提供 ID 并添加一个p:watermark 组件：

<h:form id="tableForm">
...    
    <p:dataTable var="dt" widgetVar="widgetUserRecords"
                     value="#{userBean.result}"
                     id="userRecordTable" paginator="true"
                     paginatorAlwaysVisible="false" rows="10"
                     height="300" >

        <p:column id="column1" sortBy="#{dt.course.name}" filterStyle="width:50px;"
                      filterBy="#{dt.course.name}" headerText="Course Name" style="text-align:bottom">
            <h:outputText value="#{dt.course.name}"/>
            <p:watermark forElement="tableForm:userRecordTable:column1" value="hint..."/>
        </p:column>

    </p:dataTable>
...
</h:form>

别忘了将tableForm id 替换为p:dataTable 周围的实际表单。

【讨论】：

水印组件的右边属性是“for”而不是“forElement”。如果在旧版本中是这种情况，请更新您的答案并提供两个选项。
@DiegoRodrigues 这是一个 4 年前的问题的答案，当时已被接受。如果您可以验证 2012 年水印组件的正确属性是“for”而不是“forElement”，我会很乐意接受您的编辑。谢谢！

【解决方案3】：

根据this thread on the PrimeFaces forum，应该可以使用这样的东西：

<h:form id="form">
    <p:dataTable id="dataTable">
        <p:row>
            <p:column id="column" filterBy="....">
                <p:watermark forElement=":form:dataTable:column" value="Filter..."/>
            ...
            </p:column>
        </p:row>
    </p:dataTable>
</h:form>

【讨论】：

你测试过这个吗？粘贴到示例中时，您的解决方案不起作用。
@akoskm 这只是一个示例（伪代码），它在粘贴时将不起作用，因为它缺少一些必需的属性。为了便于阅读，我省略了大部分内容。
没错。我不够具体，watermark 组件的forElement 属性需要一个 jQuery 选择器而不是组件 ID（如果它需要一个组件 ID，那么 dataTable:column 或 column 就足够了）。

【解决方案4】：

如果有人需要在具有动态列的数据表中使用占位符，也许这可以帮助您...

<p:dataTable id="generalReportTable" value="#{generalReportController.reports}" var="report"
         filteredValue="#{generalReportController.filteredReports}"
         rowKey="#{report.rowKey}" >
<p:columns id="dynamicColumns" value="#{generalReportController.columns}" var="column" columnIndexVar="colIndex" 
           sortBy="#{report[column.property]}" filterBy="#{report[column.property]}" filterMatchMode="contains"
           styleClass="dynamic-cols-width-#{colIndex}">
    <f:facet name="header">
        <p:watermark for="@(.dynamic-cols-width-#{colIndex})" value="#{column.header}" />
        <h:outputText value="#{column.header}" />
    </f:facet>
    <h:outputText value="#{report[column.property]}" />
</p:columns>

【讨论】：

【解决方案5】：

您可以在不覆盖占位符属性的情况下更改此设置，方法是转到 jquery.dataTables.js 第 2701 行并替换

.attr( 'placeholder', language.sSearchPlaceholder )

与

.attr( 'placeholder', 'Search table...' )

您还可以找到可能位于语言文件中的 sSearchPlaceholder 变量并将其替换。

【讨论】：