Menu
I am using primefaces datatable to show my data in UI. As we all know., we can do sorting and filtering in the data table itself. But it starts to search the data when I type a single character in the datatable sorting field, I dont want it. I need to search the data only when the user types atleast 3 characters in the field. Is it possible to do that..? If so., in what way? please provide your comments on that.
Thanks in advance.
969
I did a small investigation of Primefaces' data table and here are my findings.
Actually, recompilation is not necessary, source javascript substitution as well.
You need to register a new handler for filter event instead of the the one provided by Primefaces.
In this case a data table will be used like this:
<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 the javascript will be 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);
}
});
}
}
});
});
Things to note:
target="body": the javascript must not be executed in the <head>, because Primefaces initializes its widget variables in $(document).ready(), so it is not guaranteed that your function will execute after the Primefaces initialization has taken place;<p:dataTable>. Primefaces implementation varies from version to version, so be sure to check out the implementation of the version you are using, or upgrade to version 3.5;keyup) event.
145
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
