Sorting in primefaces datatable

 

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.

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;
  • as the filtering starts with at least 4 characters typed in column's search box (done), you should restore unfiltered view when user deletes text to below 4 characters by yourself (not done);
  • the solution above is aimed at Primefaces 3.5 <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;
  • implementation of filtering events with input fields rendered as dropdown boxes is not covered;
  • the table will listen to the default ( keyup ) event.
    • 链接地址: http://www.djcxy.com/p/69778.html

    上一篇: Masstransit与RabbitMQ的简单例子

    下一篇: 在primefaces数据表中排序