How to filter p:dataTable on enter event

PrimeFaces' datatable doesn't support the filtering for "onenter" event. It's not a DOM event, but it makes sense for large datatables to filter a dataset when the enter (return) key was pressed. Many users complain that they can't filter large datasets on each keystroke, only hitting of return key makes sense for them. That's exactly my case too. I use "onenter" event for filtering because a datatable sends too many requests if user inputs and removes characters very quickly. An update of the table is very slow then. The solution is not difficult. Use filterEvent="enter" in any p:column needing a filtering like this

 
<p:dataTable id="myTable" var="user" value="#{myBean.users}"
             widgetVar="myTblWidget">
  ...
  <p:column filterBy="#{user.name}" filterEvent="enter">
    ...
  </p:column>
  ...
</p:dataTable>
 

and place this little JavaScript direct after p:dataTable (can be also placed into an ui:include for better reusing)

 
<script type="text/javascript">
/* <![CDATA[ */
  jQuery(myTblWidget.jqId).find('th .ui-column-filter[onenter]').each(function(idx) {
  var curEl = jQuery(this);
  curEl.unbind('keydown');

  curEl.keydown(function(event) {
    var e = (window.event) ? window.event : event;
    if(e.keyCode == 13) {
      event.preventDefault();
      eval(curEl.attr('onenter'));
    }
  })
});
/* ]]> */
</script>
 

The script binds "keydown" event for the enter key on every input field using for the filtering (select boxes using for this purpose don't matter here). If the enter key has been detected, the built-in client-side callback being executed (by means of the JS eval function) and sends an Ajax request to filter the table. It works like a charm. I also have a meaningful tooltip for every input field using for the filtering. The reason is clear - this kind of the filtering is not always easy to understand for end users. A tooltip seems to be very handy.