Datatable surfaces for filter search

Question

The default value updates the table each time a key is pressed in the filter field. I want to display a list of results only when the user types something and presses the enter key.

Answer 1

You did not specify your version, but you can use the enter event on filterEvent with PF 3.2. In an earlier version, you can use this javascript workaround

Answer 2

for global filter you can use event.keyCode == 13

like this

 <f:facet name="header"> <p:outputPanel> <h:outputText value="Search all fields:" /> <p:inputText id="globalFilter" onkeyup="if (event.keyCode == 13) { carsTable.filter(); }" style="width:150px" /> </p:outputPanel> </f:facet> 

Answer 3

It is important to emphasize that filterEvent is an attribute of the dataTable tag, in this, for example, the javascript workaround showed in the column tag, but this does not work very well. You can use the following:

 <p:dataTable id="companyTable" value="#{fooManager.foo}" var="foo" filterEvent="enter"> <p:column filterBy="#{foo.name}" > <h:outputText value="#{foo.name}" /> </p:column> </p:dataTable> 

Or you can use with filterEvent = "Keyup", which is the default value of this attribute and filterDelay defined in 1000 milliseconds, before sending an ajax filter request (default 300 milliseconds), for example, for example:

 <p:dataTable id="companyTable" value="#{fooManager.foo}" var="foo" filterEvent="keyup" filterDelay="1000"> <p:column filterBy="#{foo.name}" > <h:outputText value="#{foo.name}" /> </p:column> </p:dataTable> 

I hope to help you.

Answer 4

Now you can use the appropriate column option. The simplest example of a data column:

 p:column filterEvent="enter"