how to add placeholder text in the filter box in datatable column headers

Question

I have a prime faces datatable with few columns and have filteryBy attribute for all the columns. How do I add placeholder or watermark to provide hint for users. Any suggestions,will be appreciated thanks!

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

Answer 1

I realise this question was asked back in 2012, but I'm hoping this answer may help people wanting to add a watermark to the filter by field in a datatable. I tried using the solutions suggested in the other answers with forElement but could not get the watermark to be displayed. Instead I found two solutions that use the for attribute, the first making use of the styleClass attribute on the p:column element, and the second making use of the jQuery selector within the for attribute. I also found that the p:watermark element needed to be located within the f:facet element used for the header.

The code I used in the for these two solutions is as follows:

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