Primefaces dataTable filter on enter

Question

I am using primefaces 5.0 and datatable with filter option. But it is unconvenient to type one letter and wait when it is will filter and update then type next letter. It is also slows a server. Therefore there is need for press enter key after you fill filter option and then filter.

There was filterDelay option in primefaces 3.5 but I dont see in primefaces 5.

I used to hack by javascript code as follows

$('th .ui-column-filter').each(function() {
                        var inp = $(this);
                        inp.unbind('keydown');
                        inp.unbind('keyup');
                        inp.unbind('keypress');
                        inp.keypress(function(event) {
                            if (event.keyCode == 13) {
                                alert("entered");
                                event.stopPropagation();
                                gwsReportAllPartListDataTable.filter();
                                return false;
                            }
                        });
                    });

Well, it did not work.

How can I do it with primefaces 5?

Answer 1

According to the PrimeFaces User Guide (5.0 and 5.1), there still is the option filterEvent="..." and also filterDelay="..."

Name: filterEvent , Default: keyup , Type: String , Description: Event to invoke filtering for input filters . Name: filterDelay , Default: 300 , Type: Integer , Description: Delay in milliseconds before sending an ajax filter query.

Both options are for the tag p:dataTable

One of these two should solve your problem, I guess. (the Delay option, if you were willing to change to filters on the columns, or on the other hand the filterEvent option, which is still existent).

Answer 2

In the 5.2 Userguide (Chapter 3.32) there is still a filterDelay option in the DataTable . Doesn't it work for you?

A very similar solution to your was posted by BalusC in his blog " How to filter p:dataTable on enter event " from April 7, 2011. Maybe you can adapt something from there.

Answer 3

For the angular 2+ users out there what you can do is instead of doing(using the example from https://www.primefaces.org/primeng/#/table/filter ):

<input *ngSwitchCase="'vin'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, col.filterMatchMode)">

You can do:

<input *ngSwitchCase="'vin'" pInputText type="text" (keyup.enter)="dt.filter($event.target.value, col.field, col.filterMatchMode)">