问题
Is there a way to filter a p:datatable column by clicking on the text inside and making this text the filter ?
In other words, if I click on a session ID, I would like the datatable to filter this column by the clicked ID, as if I had entered it manually in the filter above ?
I am using Primefaces 6
UPDATE
This is my complete Datatable with the suggested solution:
<p:dataTable id="tablealltx" var="transaction" value="#{pastTxModel.txList}" paginator="true" rows="20" sortBy="#{transaction.createdDate}" sortOrder="descending" resizableColumns="true">
<p:column filterBy="#{transaction.session}" filterMatchMode="contains">
<f:facet name="filter">
<p:inputText id="myFilter" value="#{transactionXmlController.currentFilter}" onchange="PF('alltxform').filter()" />
</f:facet>
<p:outputLabel value="#{transaction.session}" ondblclick="document.getElementById('alltxform:tablealltx:myFilter').value = this.innerText;PF('tablealltx').filter()" >
</p:column>
</p:dataTable>
When I double click on the session, the value is entered in the filter text box, but the filtering itself does not work. Nothing happens.
I am using TomEE 7.0.1
Solution Copy Paste from Jasper:
The data table in your question doesn't have a widgetVar set to tablealltx, so PF('tablealltx').filter() will fail. You can test it by entering PF('tablealltx') in your browser's JavaScript console.
回答1:
I was able to achieve this by setting widgetVar="myTable"
to the data table, using a custom filter field, replacing the cell contents with p:outputLabel
(which has ondblclick
) and JavaScript it all together:
<p:column headerText="Session" filterBy="#{transaction.session}" ...>
<f:facet name="filter">
<p:inputText id="myFilter"
value="#{myBean.myFilter}"
onchange="PF('myTable').filter()"/>
</f:facet>
<p:outputLabel value="#{transaction.session}"
ondblclick="document.getElementById('myForm:myTable:myFilter').value = this.innerText;PF('myTable').filter()"/>
</p:column>
For better readability, here's the ondblclick
:
var filterId = 'myForm:myTable:myFilter';
document.getElementById(filterId).value = this.innerText;
PF('myTable').filter();
You could replace p:outputLabel
with a simple h:outputText
, but in that case (assuming you are on JSF 2.2+) you need to add the namespace xmlns:a="http://xmlns.jcp.org/jsf/passthrough"
. Now you can use:
<h:outputText value="#{transaction.session}"
a:ondblclick="..."/>
See also:
- Custom HTML tag attributes are not rendered by JSF
来源:https://stackoverflow.com/questions/39773150/pdatatable-filter-cannot-validate-component-with-empty-value