Come posso aggiornare un dataTable YUI con un pulsante?

Question

sto testando il copione:

http://developer.yahoo.com/yui/examples/datatable/dt_xhrjson.html

Vorrei aggiungere un pulsante per aggiornare (reset) i dati. Vorrei ripristinare tutti i dati modificati e ricaricare i primi dati. ho aggiungere questo codice, così dopo selezionare (refresh), non ho dati:

YAHOO.util.Event.onContentReady("splitbuttonsfromjavascript", function() { 

var onMenuItemSelect = function() { 

     myDataTable.initializeTable(); 

     myDataTable.render(); 

     }; 

     var aSplitButton5Menu = [ 

      { text: "Refresh", value: 1, onclick: { fn: onMenuItemSelect } } 

     ]; 

     var oSplitButton5 = new YAHOO.widget.Button({ type: "split", label: "Refresh table", name: "splitbutton", menu: aSplitButton5Menu, container: this }); 

    }); 

Che cosa ho bisogno di usare nel mio onMenuItemSelect per aggiornare mydataTable?

---

ho fatto alcune modifiche di modificare la "città" e "rating" nel campione: http://developer.yahoo.com/yui/examples/datatable/dt_xhrjson.html

Ora, vorrei che il ripristino MyTable con un pulsante (e ricalibratura set di dati di default). Quando uso il mio codice, dopo aver cliccato con il tasto, ho cancellato tutto e i dati predefiniti non vengono ricaricati (ho: "Nessun record trovato." Dopo il clic del pulsante).

Come posso ricaricare i dati di default?

Answer 1

Supponendo di avere un DataTable esempio myTable:

myTable.render() ridisegnerà la tavola; myTable.initializeTable() soffiare via tutto lo stato, comprese le specie e le selezioni, e ridisegnare

-Eric

Answer 2

penso che funzionerà se avete il vostro pulsante di chiamata di questa funzione:

myDataTable.getDataSource().sendRequest('', 
{ success: myDataTable.onDataReturnInitializeTable,scope: myDataTable}); 

Answer 3

non ho potuto ottenere il metodo che Gourneau pubblicato (è menzionato in tutto il luogo) per lavorare, quindi mi si avvicinò con questo piccolo hack:

function updateTable(){ 
     sortState = theDataTable.getState().sortedBy 
     var sort = sortState ? sortState.key : "id"; 
     var dir = sortState ? sortState.dir : "yui-dt-desc"; 
     theDataTable.sortColumn(theDataTable.getColumn(sort),dir); 
    }; 

voi trovare il metodo di ordinamento corrente, quindi effettuare una chiamata a sortColumn che dice di ordinare nuovamente e aggiorna i dati. questo mantiene anche l'impaginazione. Lo uso con una casella di ricerca e alcuni filtri, così posso modificare i loro valori e aggiornare la tabella di conseguenza.

Answer 4

Penso che la risposta di Gourneau sia la migliore, ma manca un tocco di classe. Per visualizzare il messaggio "Caricamento in corso ...", è necessario effettuare una chiamata alla funzione showTableMessage.

myDataTable.showTableMessage("Loading..."); 
myDataTable.getDataSource().sendRequest('', { success: myDataTable.onDataReturnInitializeTable, scope: myDataTable }); 

Quando la richiesta è terminata, la funzione onDataReturnInitializeTable sarà chiaro automaticamente il messaggio tavolo.

Ho postato questo sul mio blog pure.

Answer 5

Non credo di poter postare adeguatamente tutto il codice qui per la soluzione necessaria, ma Satyam di Yahoo (un importante contributore allo YUI almeno) ha un metodo di richiesta che ha aggiunto un'estensione per il Datatable e ha pubblicato un esempio per questo. L'ho usato e funziona perfettamente, specialmente quando hai bisogno di una funzione di ricerca per i tuoi tavoli.

Ecco un link per cominciare, ma vorrei anche cercare sotto "Satyam requery" per ulteriori esempi o esempi che si adattano di più con la versione del datatable.

http://www.satyam.com.ar/yui/2.6.0/requery.html

-Jason

P.S. Se si utilizzano dati sul lato server, una soluzione che utilizza il metodo onDataReturnInitializeTable sarebbe di aiuto, ma penso che la soluzione di Satyam tenga conto anche di questo, oltre a tenere traccia della propria impaginazione.