Ordinamento in primefaces datatable

Sto usando primefaces datatable per mostrare i miei dati nell'interfaccia utente. Come tutti sappiamo, possiamo fare ordinamento e filtraggio nella tabella dati stessa. Ma inizia a cercare i dati quando digito un singolo carattere nel campo di ordinamento datatable, non lo voglio. Devo cercare i dati solo quando l'utente digita almeno 3 caratteri nel campo. È possibile farlo..? Se è così, in che modo? si prega di fornire i vostri commenti su questo.Ordinamento in primefaces datatable

Grazie in anticipo.

fonte

2013-03-02 Arun

Da quello che ho visto, le opzioni sono o per convalidare l'intera tabella O per apportare una piccola modifica alla sorgente di dati PF e ricompilare. Quale siete disposti a implementare? – kolossus

@kolossus: è ok, se ho scavalcato alcuni metodi dal codice sorgente datatable per il mio problema. ma non dovrebbe diventare un overhead per me se la PF avanza versioni datatable. – Arun

@kolossus è in grado di fornire una soluzione per apportare piccole modifiche alla sorgente di dati PF? – tylerdurden

Ho fatto una piccola indagine sulla tabella di dati di Primefaces e qui ci sono le mie conclusioni.

In realtà, la ricompilazione non è necessaria, anche la sostituzione del codice sorgente.

È necessario registrare un nuovo gestore per l'evento filtro anziché quello fornito da Primefaces.

In questo caso una tabella di dati saranno utilizzati in questo modo:

<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>

E il javascript sarà simile a questo:

$(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); 
        } 
       }); 
      } 
     } 
    }); 
});

Cose da notare:

target="body": il javascript non deve essere eseguito nello <head> , poiché Primefaces inizializza le sue variabili widget in $(document).ready(), quindi non è garantito che la tua funzione eseguirà dopo l'inizializzazione di Primefaces ha avuto luogo;
poiché il filtro inizia con almeno 4 caratteri immessi nella casella di ricerca della colonna (terminata), è necessario ripristinare la vista non filtrata quando l'utente elimina il testo a un valore inferiore a 4 caratteri (non eseguito);
la soluzione di cui sopra è destinata a Primefaces 3.5 <p:dataTable>. L'implementazione di Primefaces varia da versione a versione, quindi assicurati di verificare l'implementazione della versione che stai utilizzando o l'aggiornamento alla versione 3.5;
l'implementazione di eventi di filtro con campi di input visualizzati come caselle a discesa non è coperta;
la tabella ascolterà l'evento predefinito (keyup).

fonte

2013-03-05 09:39:28 skuntsel

risposta

Problemi correlati