Cómo cambiar la fuente de datos en una cuadrícula de datos YUI después de la creación

Question

Estoy usando el Yahoo DataTable para el cual la API es here.

Estoy teniendo dificultades para cambiar los datos una vez que he procesado la cuadrícula una vez. Estoy usando jQuery para obtener datos a través de AJAX, o desde una isla de datos del lado del cliente y necesito poner esto de nuevo en la red.

No hay un método setDataSource en el DataTable API, y al cambiar 'dataSource.liveData' no se actualiza la grilla.

// does not work 
dataTable.dataSource.liveData = [ {name:"cat"}, {name:"dog"}, {name:"mouse"}; 

El ejemplo en el que estoy basando mi código es el basic LocalDataSource example.

¿Cómo puedo actualizar la fuente de datos sin tener que recrear completamente la tabla. NO quiero usar las fuentes de datos YUI que hacen llamadas Async. Necesito saber cómo puedo hacer esto 'manualmente'.

Answer 1

Estaba en el camino correcto, simplemente se olvidó de decirle a la fuente de datos que envíe los datos a la tabla de datos. Suponiendo que usted está usando un LocalDataSource y desea reemplazar los datos en la tabla con lo que está en el origen de datos, después de reemplazar LiveData que acaba de hacer

dataTable.getDataSource().sendRequest(null, 
    {success: dataTable.onDataReturnInitializeTable}, 
    dataTable); 

consulta las otras onDataReturnXXX métodos de DataTable en la referencia de la API. Puede agregar los datos nuevos en lugar de reemplazarlos, etc.

Answer 2

¿Cómo puedo actualizar la fuente de datos sin tener que recrear completamente la tabla?

¿Quiere decir sin usar una declaración "nueva"? Si es así, no he tenido que hacerlo yo mismo, pero uso YUI a menudo. Observé que hay un método deleteRows que puede usar para eliminar todas las filas, de 0 a la longitud de la tabla, y luego usar addRows que toma una matriz literal como la suya y un índice, 0, en este caso.

¿Has probado esto?

Editar: Eche un vistazo a this example. Lo que quieres hacer definitivamente se puede hacer. La tabla se actualiza localmente en un intervalo establecido utilizando el método setInterval (no sorprendentemente). Al observar lo que hace setInterval, puede ver que llama a makeConnection en la instancia de la fuente de datos. El método parece que está haciendo una llamada remota, pero no necesariamente.

Echemos un vistazo a un par de líneas del ejemplo.

// Set up polling 
    var myCallback = { 
     success: myDataTable.onDataReturnInitializeTable, 
     failure: function() { 
      YAHOO.log("Polling failure", "error"); 
     }, 
     scope: myDataTable 
    } 
    myDataSource.setInterval(5000, null, myCallback) 

la última línea que se podría llamar una vez (o bajo demanda como sea necesario) en lugar de en un intervalo reescribiendo así:

myDataSource.makeConnection(null, myCallBack) 

que llama al método onDataReturnInitializeTable - lo que supongo que podría llamar directamente, lo cual tendría más sentido.

De todos modos, solo sigue el ejemplo y saca las partes que no necesitas. En última instancia, parece que el método onDataReturnInitializeTable es la clave.

Espero que ayude.

Answer 3

Solo quería agregar que puede conservar la paginación si pasa una llamada a getState() en la propiedad del argumento.

dataTable.getDataSource().sendRequest(null, 
    { 
     success: dataTable.onDataReturnInitializeTable, 
     argument: dataTable.getState()  
    } 
); 

Answer 4

En realidad, todo lo que hice para conseguir que funcione es las dos líneas siguientes de código (y la mía fue devuelto procedente del Ajax de modo un poco diferente de la OP) ...

dataTable.dataSource.liveData = eval(o.responseText); 
dataTable.load({}); 

porque si lees lo que hace datatable.load() es lo que todos sugerían llamar.