/ / La colonne spécifique au filtre datatable de Primefaces dans l'en-tête - Primefaces, jsf-2

Primefaces colonne de filtre spécifique datatable dans l'en-tête - primefaces, jsf-2

Dans Primefaces datatable, il peut filtrer une colonne spécifique à l'aide du code suivant:

<p:column filterBy="#{car.id}" headerText="Id" filterMatchMode="contains">
<h:outputText value="#{car.id}" />
</p:column>

Le code ci-dessus générera un filtre sur l'en-tête de la colonne. Ce que je veux, c'est créer un filtre sur l'en-tête de datatable, pas de colonne. Du Vitrine, il y a un code:

<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search all fields:" />
<p:inputText id="globalFilter" onkeyup="PF("carsTable").filter()"/>
</p:outputPanel>
</f:facet>

Cela mettra un filtre dans l'en-tête de datatable, mais cela filtrera tous les champs du datatable, ce que je ne veux pas, je veux qu'il filtre uniquement une colonne spécifique, est-ce possible?

Réponses:

1 pour la réponse № 1

Vous pouvez utiliser quelques hacks. Ajoutez d'abord un widgetVar attribuer à votre p:dataTable, par exemple widgetVar="myTable". Ensuite, ajoutez un id vous attribuer p:column:

<p:column filterBy="#{car.id}"
headerText="Id"
filterMatchMode="contains"
id="clm">
<h:outputText value="#{car.id}" />
</p:column>

Vous pouvez utiliser cet identifiant pour sélectionner le champ de filtre de colonne. Dans le filtre global, vous souhaitez supprimer le id attribuer et ajouter un onkeyup écouteur qui définit la valeur "s de l'entrée dans le filtre de la colonne et déclenche le filtrage sur la table à l'aide de la commande widgetVar.

<f:facet name="header">
<p:inputText onkeyup="document.getElementById("frm:tbl:clm:filter").value=this.value; PF("myTable").filter();"/>
</f:facet>

Ici, je suppose que votre formulaire a l'identifiant frm et votre table de données a l'ID tbl. Ils ont probablement des identifiants différents, changez donc le code en conséquence.

Si vous ne voulez pas que le filtre soit visible dans la colonne, vous pouvez le cacher avec une règle CSS:

.ui-datatable .ui-column-filter[id="frm:tbl:clm:filter"] {
display: none;
}

Si vous utilisez le chargement paresseux, vous pouvez également consulter Primefaces lazy datatable: mettre mon propre filtre à la place de GlobalFilter