Geek Answers Handbook

Sort in datatable format

I use transparency to show my data in the user interface. As we all know, we can sort and filter in the data table itself. But he begins to search for data, when I type one character in the data sorting field, I do not want it. I need to search for data only when the user enters at least 3 characters in the field. Can this be done ..? If so, how? please report this.

Thanks in advance.

+7
source share
1 answer

I did a little research on the Primefaces data table, and here are my findings.

Actually, recompilation is not needed, replace the original javascript.

You need to register a new handler for the filter event, not the one provided by Primefaces.

In this case, the data table will be used as follows:

<h:outputScript name="js/customprimefacestable.js" target="body"/> <p:dataTable var="data" value="#{filterBean.data}" filteredValue="#{filterBean.filteredData}" widgetVar="tableWidget"> <p:column filterBy="#{data.name}" headerText="Name" filterMatchMode="contains"> <h:outputText value="#{data.name}" /> </p:column> <p:column filterBy="#{data.value}" headerText="Value" filterMatchMode="contains"> <h:outputText value="#{data.value}" /> </p:column> ... </p:dataTable>

And javascript will look like this:

 $(document).ready(function() { tableWidget.thead.find('> tr > th.ui-filter-column > .ui-column-filter').each(function() { var filter = $(this); if(filter.is('input:text')) { if(tableWidget.cfg.filterEvent!="enter"){ //unbind current handler filter.unbind(tableWidget.cfg.filterEvent); //bind new handler that accounts for conditional filtering filter.bind(tableWidget.cfg.filterEvent, function(c) { if(filter.val().length > 3) { //Primefaces 3.5 implementation if(tableWidget.filterTimeout){ clearTimeout(tableWidget.filterTimeout); } tableWidget.filterTimeout=setTimeout(function(){ tableWidget.filter(); tableWidget.filterTimeout=null}, tableWidget.cfg.filterDelay); } }); } } }); });

Notes :

  • target="body" : javascript should not be executed in <head> because Primefaces initializes its widget variables in $(document).ready() , therefore it is not guaranteed that your function will be executed after Primefaces initialization;
  • since filtering starts with at least 4 characters entered in the column search field (done), you must restore the unfiltered view when the user deletes the text up to 4 characters on his own (not performed);
  • the solution above is aimed at Primefaces 3.5 <p:dataTable> . The implementation of Primefaces varies from version to version, so be sure to check the version of your version or upgrade to version 3.5;
  • implementation of filtering events with input fields displayed as pop-up windows is not distributed;
  • the table will listen for the default event ( keyup ).
+4
source

More articles:


All Articles