как добавить текст-заполнитель в поле фильтра в заголовках столбцов с данными

У меня есть простые лица с несколькими столбцами и атрибутом 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>

datatable filter primefaces jquery-tooltip
person santa029    schedule 22.10.2012    source источник

Ответы (5)


arrow_upward
5
arrow_downward

Сначала укажите идентификатор столбца и добавьте компонент 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 вашей фактической формой вокруг вашего p:dataTable.

person Akos K    schedule 23.10.2012
comment
Правильный атрибут компонента водяного знака — for, а не forElement. Если это было так в более старых версиях, обновите свой ответ и укажите оба варианта. - person Diego Urenia; 16.06.2016
comment
@DiegoRodrigues Это ответ на вопрос 4-летней давности, который тогда был принят. Если вы можете убедиться, что в 2012 году правильный атрибут компонента водяного знака был для, а не для элемента, я с радостью приму ваше редактирование. Спасибо! - person Akos K; 22.06.2016

arrow_upward
8
arrow_downward

Я понимаю, что этот вопрос был задан еще в 2012 году, но я надеюсь, что этот ответ может помочь людям, желающим добавить водяной знак в фильтр по полю в таблице данных. Я попытался использовать решения, предложенные в других ответах, с forElement, но не смог отобразить водяной знак. Вместо этого я нашел два решения, в которых используется атрибут for: первое использует атрибут styleClass для элемента p:column, а второе использует селектор jQuery в атрибуте for. Я также обнаружил, что элемент 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>
person Paul H    schedule 02.05.2014
comment
+1, это следует отметить как правильный ответ. В PrimeFaces 5.1 я искал везде, прежде чем наткнулся на этот пост, и, наконец, он заработал. Я должен сказать, что в моей форме было установлено «prependId = false», поэтому для меня @(#myTable\\:column2\\:filter) было достаточно. YMMV. - person gjoris; 05.02.2015

arrow_upward
1
arrow_downward

Согласно этой теме на форуме PrimeFaces, должно быть возможно использовать что-то вроде этого:

<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>
person siebz0r    schedule 23.10.2012
comment
Вы проверяли это? Ваше решение не работает при вставке в пример. - person Akos K; 23.10.2012
comment
@akoskm это просто пример (псевдокод), он не будет работать при вставке, так как в нем отсутствуют некоторые обязательные атрибуты. Я опустил большинство вещей для удобства чтения. - person siebz0r; 23.10.2012
comment
вот так. Я не был достаточно конкретным, атрибут forElement компонента watermark нуждается в селекторе jQuery, а не в идентификаторе компонента (если для этого потребуется идентификатор компонента, тогда dataTable:column или column будет достаточно). - person Akos K; 23.10.2012

arrow_upward
0
arrow_downward

если кому-то нужно использовать заполнитель в таблице данных с динамическими столбцами, возможно, это может вам помочь...

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

person Darkness    schedule 23.10.2015

arrow_upward
0
arrow_downward

Вы можете изменить это, не переопределяя атрибут заполнителя, перейдя к строке jquery.dataTables.js 2701 и заменив

.attr( 'placeholder', language.sSearchPlaceholder )

с

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

Вы также можете найти переменную sSearchPlaceholder, которая, вероятно, находится в языковом файле, и заменить ее.

person David Shields    schedule 25.06.2016