¿Cómo puedo actualizar una tabla de datos YUI con un botón?

Question

Estoy probando el script:

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

me gustaría añadir un botón para actualizar (reset) los datos. Restablecería todos los datos modificados y volveré a cargar los primeros datos. que añadir este código, por lo que después seleccione (actualización), no tengo datos:

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

    }); 

Lo que necesito para usar en mi onMenuItemSelect para refrescar mydataTable?

---

he hecho algunos cambios para modificar la "ciudad" y "Nota" en la muestra: http://developer.yahoo.com/yui/examples/datatable/dt_xhrjson.html

Ahora, deseo reiniciar MiTabla con un botón (y recarga conjunto de datos por defecto). Cuando uso mi código, después de hacer clic en el botón, borro todo y los datos predeterminados no se vuelven a cargar (tengo: "No se encontraron registros" después de hacer clic en el botón).

¿Cómo puedo volver a cargar los datos predeterminados?

Answer 1

Asumiendo que tiene una instancia de DataTable myTable:

myTable.render() se volverá a dibujar la tabla; myTable.initializeTable() soplará lejos todo el estado, incluyendo tipo y selecciones, y volver a dibujar

-Eric

Answer 2

creo que va a funcionar si usted tiene su llamada botón de esta función:

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

Answer 3

no pude conseguir el método que Gourneau publicado (es mencionado por todo el lugar) para trabajar, por lo que me ocurrió con este pequeño truco:

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

se encuentre el método de clasificación actual, y luego realice una llamada a sortColumn diciéndole que ordene de nuevo, y refresca los datos. esto mantiene la paginación en orden también. Lo uso con un cuadro de búsqueda y algunos filtros para poder cambiar sus valores y actualizar la tabla en consecuencia.

Answer 4

Creo que la respuesta de Gourneau es la mejor, pero le falta un toque agradable. Para que aparezca el mensaje 'Cargando ...', debe realizar una llamada a la función showTableMessage.

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

Cuando la solicitud está terminado, la función onDataReturnInitializeTable se borrará automáticamente el mensaje de mesa.

He publicado esto en mi blog también.

Answer 5

No creo que pueda publicar adecuadamente todo el código aquí para su solución necesaria, pero Satyam de Yahoo (uno de los principales contribuyentes a YUI al menos) tiene un método de consulta que ha agregado una extensión para Datatable y ha publicado un ejemplo para ello. Lo he usado y funciona muy bien, especialmente cuando necesitas una función de búsqueda para tus tablas.

Aquí hay un enlace para comenzar, pero también buscaría en "Satyam requery" para obtener más ejemplos o ejemplos que se ajusten mejor a su versión de la tabla de datos.

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

-Jason

P. S. Si está utilizando datos del lado del servidor, una solución que utilice el método onDataReturnInitializeTable sería útil, pero creo que la solución de Satyam también lo explica, así como el seguimiento de su paginación.