How do I add type="search" to the auto-generated filter inputs on p:dataTable?

UI Components for JSF
Post Reply
primeUser99282
Posts: 36
Joined: 14 Nov 2021, 01:48

24 Nov 2021, 21:30

I'm trying to implement the following for the filter inputs on a p:dataTable:

https://github.com/primefaces/primevue/issues/83

I can obviously do this by adding the type="search" and onsearch event to any defined inputText, but the datatable auto-generates the inputText fields.

<p:inputText type="search" id="globalFilter" value="#{view.globalFilterValue}" onsearch="PF('itemTable').filter()" onkeyup="PF('itemTable').filter()" placeholder="Global Search"/>

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

25 Nov 2021, 19:48

This feature should be requested by GitHub ticket: https://github.com/primefaces/primefaces/issues

But for now you can simply do it with this 1 line of JQuery added to your page...

Code: Select all

$('input.ui-column-filter.ui-inputfield.ui-inputtext').attr('type', 'search');
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

25 Nov 2021, 19:52

PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 12 guests