3

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>
santa029
  • 329
  • 6
  • 10
  • 23

5 Answers5

10

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>
Paul H
  • 2,104
  • 7
  • 39
  • 53
  • 2
    +1, this should be marked as the correct answer. In PrimeFaces 5.1, I searched high and low, before stumbling over this post, and finally got it working. I do have to say that I had 'prependId="false"' set on my form, so for me, @(#myTable\\:column2\\:filter) was sufficient. YMMV. – gjoris Feb 05 '15 at 11:28
5

First give and ID for your column and add a p:watermark component:

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

Don't forget to replace the tableForm id with your actual form around your p:dataTable.

Akos K
  • 7,071
  • 3
  • 33
  • 46
  • The right attribute of the watermark component is "for" and not "forElement". If it was the case in older versions, please update your answer and give both options. – Diego Urenia Jun 16 '16 at 19:50
  • @DiegoRodrigues This is an answer to a 4 year old question which was accepted back then. If you can verify that in 2012 the right attribute of the watermark component was "for" and not "forElement" I'll happily accept your edit. Thanks! – Akos K Jun 22 '16 at 19:25
1

According to this thread on the PrimeFaces forum it should be possible using something like this:

<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>
siebz0r
  • 18,867
  • 14
  • 64
  • 107
  • Have you tested this? Your solution doesn't work when pasted into an example. – Akos K Oct 23 '12 at 05:31
  • @akoskm it's just an example (pseudo code) it will not work when pasted since it is missing some required attributes. I omitted most things for readability. – siebz0r Oct 23 '12 at 05:40
  • thats right. I wasn't specific enough, the `forElement` attribute of the `watermark` component needs a jQuery selector not a component ID (if it would require a component ID then `dataTable:column` or `column` would be enough). – Akos K Oct 23 '12 at 06:16
0

if someone needs to use a placeholder in a datatable with dynamic columns, maybe this could help you...

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

Darkness
  • 1
0

You can change this without overriding the placeholder attribute by going to jquery.dataTables.js line 2701 and replacing

.attr( 'placeholder', language.sSearchPlaceholder )

with

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

You could also find the sSearchPlaceholder variable which is probably located in a language file and replace that.

Yasin Patel
  • 5,624
  • 8
  • 31
  • 53
David Shields
  • 1