Allow only digits to the filtered textbox (search filter) of dataTable in Primefaces

Question

Is it possible to apply such a validation to a filtered textbox provided by dataTable of Primefaces by customizing it.

The maximum number of characters that this textbox can hold can be set by using the filterMaxLength="45" property of <p:column>. For example.

<p:column headerText="headerText" sortBy="#{obj.properyName}" filterMaxLength="45" filterBy="#{obj.properyName}">
    <h:outputText value="#{obj.properyName}" />
</p:column>

I can't see such a property to perform other kind of validations such as allowing only specific characters, perhaps by using a regex.

Anyway, I need to allow it to have only digits, since there an id column of the type BIGINT (primary key, auto-increment) in MySQL database which is mapped to the Long datatype in entity classes.

Is it supported by Primefaces or is there a way to customize it?

AFAIK, Primefaces doesn't have this option, you can use javascript to solve that. — Rong Nguyen, May 14 '13 at 11:49
@RongNK Agreed. Filter box ends up ultimately as an input field to which custom JavaScript can be attached. You can bind its `key...` event that restricts any input other than numerical one. — skuntsel, May 14 '13 at 12:39
@Tiny You could implement solution from [this answer](http://stackoverflow.com/a/995193/1820286) after inspecting necessary text input identifier/class in browser tools like Firebug. — skuntsel, May 14 '13 at 12:46
@RongNK I don't feel like doing so. We pointed OP at the right direction and I think that you job's done. — skuntsel, May 14 '13 at 13:02

score 2 · Accepted Answer · edited May 23 '17 at 11:46

AFAIK Primefaces doesn't has this option. You can use javascript to solve that.

You have to set id for column that you want to limit, the input(use for filter) have default id is filter, then you process keydown event to allow only digits. for example, i create one form(id="form"), and nest one datatable(id="cars"),one column(id="cl2") and input's id is filter, then i bind keydown event to filter the key which user type:

<h:form id="form">
<script type="text/javascript">
                //<![CDATA[
                $(document).ready(function() {
                    $("#form\\:cars\\:cl2\\:filter").keydown(function(event) {
                        // Allow: backspace, delete, tab, escape, and enter
                        if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || 
                            // Allow: Ctrl+A
                        (event.keyCode == 65 && event.ctrlKey === true) || 
                            // Allow: home, end, left, right
                        (event.keyCode >= 35 && event.keyCode <= 39)) {
                            // let it happen, don't do anything
                            return;
                        }
                        else {
                            // Ensure that it is a number and stop the keypress
                            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                                event.preventDefault(); 
                            }   
                        }
                    });
                });
                //]]>
            </script>
<p:dataTable id="cars">
      <p:column id="cl2" headerText="MANUFAC" filterMatchMode="contains" filterBy="#{carr.manufacturer}">  
</p:dataTable>

See also: How to allow only numeric (0-9) in HTML inputbox using jQuery?

That has been done. It would have even been better, if it had been allowed to change the default id `filter`. Is there a way? Do you know? Thank you. — Tiny, May 16 '13 at 08:27
No reason but there might be cases when this id may vary depending upon the version of Primefaces. If such is a case, then it requires to modify the id (if the framework is changed). — Tiny, May 16 '13 at 08:36
If the framework is changed, may be you will change a lot of codes, not only input's id, you can get input's id very easy(use Inspect element function of browser) :) — Rong Nguyen, May 16 '13 at 08:42
This will however cause the event (defaults to keyup in `DataTable` filter) to be triggered, even when a wrong key is pressed. It may result in executing costly queries (JPA/Hibernate or otherwise) on the server side that shouldn't happen anymore ( when a non digit key is pressed). — Lion, Jul 28 '13 at 11:07

score 0 · Answer 2 · answered Nov 20 '17 at 06:59

Extending Rong Nguyens answer.

In your javascript method, to find the Filter component. Rather than navigating down the DOM tree elements, you can use filterStyleClass attribute on p:column.

Here is an example:

<p:column id="cl2" headerText="MANUFAC" filterStyleClass="filterNumbersOnly" filterMatchMode="contains" filterBy="#{carr.manufacturer}">

And in your JS method you can use that class to get element:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    $(".filterNumbersOnly").keydown(function(event) {
        //Your logic to restrict numbers only goes here
    }
})
</script>

The advantage is since this method is CSS class based element selection. You can write this JS function once in your application and apply this class as: filterStyleClass="filterNumbersOnly" on any number of columns throughout your application or page.

Allow only digits to the filtered textbox (search filter) of dataTable in Primefaces

2 Answers2