0

I have the below table in primefaces :

         <h:form> 
                    <p:dataTable var="contentVos" value="#{serviceBean.clientsVo}" style="padding-top: 10vmin;margin: auto;max-width: 150vmin;text-align: center"
                                 rows="3"
                                 paginator="true"
                                 paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                 currentPageReportTemplate="{startRecord}-{endRecord} of {totalRecords} records"
                                 rowsPerPageTemplate="3,10,15" 
                                 widgetVar="clientTable"
                                 reflow="true"
                                 emptyMessage="No items found " filteredValue="#{serviceBean.filteredClientsVos}"
                                 >
                        
                         <f:facet name="header">
                            <p:outputPanel>
                                <h:outputText value="Search all fields : " />
                                <p:inputText id="globalFilter" onkeyup="PF('clientTable').filter()" style="width:150px;background-color: white;" placeholder="Search"/>
                            </p:outputPanel>
                        </f:facet>


                        <p:column headerText="client name" filterMatchMode="startsWith" filterBy="#{contentVos.name}">

                            <h:outputText value="#{contentVos.name}" />
                        </p:column>



                        <p:column headerText="client number" filterBy="#{contentVos.msisdn}" filterMatchMode="startsWith">
                            <h:outputText value="#{contentVos.msisdn}" />
                        </p:column>


                        <p:column headerText="client Image">
                            <p:graphicImage value="http://srv1.spectrum.com.jo:8084/SpectrumMusicPortal/resources/images/#{clientsVos.image}" title="Normandie" width="50%" alt="not avilable" /> 

                        </p:column>

                        <p:column headerText="client country">
                            <h:outputText value="#{contentVos.countryName}" />
                        </p:column>
                        <p:column headerText="added by" rendered="#{serviceBean.usersVo.id == 2}">
                            <h:outputText value="#{contentVos.userName}" />
                        </p:column>
                    </p:dataTable>

 </h:form>

And I'm trying to add a placeholder for the filter box using primefaces , put it's not supported so I tried to add it using javascript like the below way :

  <script>
        const placeholder = 
        document.getElementById('j_idt12:j_idt13:j_idt16:filter'); 

        placeholder.setAttribute("placeholder","search");
    </script>

for sure it not worked because the targeted item filterBy don't have attribute placeholder can anyone advise how could I implement it?

yasmin
  • 15
  • 6
  • See https://www.primefaces.org/showcase/ui/data/datatable/filter.xhtml and `f:facet name="filter"` – Jasper de Vries Nov 02 '20 at 11:13
  • Also see https://stackoverflow.com/questions/16666472/custom-html-tag-attributes-are-not-rendered-by-jsf. The `f:passThroughAttribute` works with the most components. – fuggerjaki61 Nov 02 '20 at 12:44

0 Answers0