Estoy usando el complemento jQuery datatables y cargo mis datos que he cargado en DOM en la parte inferior de la página e inicia el complemento de esta manera:
var myData = [
{
"id": 1,
"first_name": "John",
"last_name": "Doe"
}
];
$('#table').dataTable({
data: myData
columns: [
{ data: 'id' },
{ data: 'first_name' },
{ data: 'last_name' }
]
});
Ahora. después de realizar alguna acción, quiero obtener nuevos datos usando ajax (pero no la opción ajax incorporada en las tablas de datos, ¡no me malinterpretes!) y actualizar la tabla con estos datos. ¿Cómo puedo hacer eso usando la API de tablas de datos? La documentación es muy confusa y no encuentro una solución. Cualquier ayuda será muy apreciada. Gracias.
Respuestas:
SOLUCIÓN: (Aviso: esta solución es para tablas de datos versión 1.10.4 (por el momento) no versión heredada).
ACLARACIÓN Según la documentación de la API (1.10.15), se puede acceder a la API de tres formas:
La definición moderna de DataTables (mayúscula camel):
var datatable = $( selector ).DataTable();
La definición heredada de DataTables (minúsculas en camello):
var datatable = $( selector ).dataTable().api();
Usando la
new
sintaxis.var datatable = new $.fn.dataTable.Api( selector );
Luego cargue los datos así:
Referencias de API:
https://datatables.net/reference/api/clear ()
https://datatables.net/reference/api/rows.add ()
https://datatables.net/reference/api/draw ()
fuente
datatable.clear().rows.add(newDataArray).draw()
). A partir de este comentario, estoy usando la versión 1.10.18Puedes usar:
Jsfiddle
Actualizar. Y sí, la documentación actual no es tan buena, pero si está bien utilizando versiones anteriores, puede consultar la documentación heredada .
fuente
Debe destruir la instancia antigua de la tabla de datos y luego reinicializar la tabla de datos
Primero verifique si existe una instancia de tabla de datos usando $ .fn.dataTable.isDataTable
si existe, destrúyalo y luego cree una nueva instancia como esta
fuente
Aquí está la solución para la tabla de datos heredada 1.9.4
fuente
En mi caso, no estoy usando la api ajax incorporada para alimentar Json a la tabla (esto se debe a un formato que fue bastante difícil de implementar dentro de la devolución de llamada de procesamiento de la tabla de datos).
Mi solución fue crear la variable en el alcance externo de las funciones de carga y la función que maneja la actualización de datos (
var table = null
por ejemplo).Luego creo una instancia de mi tabla en el método de carga
y finalmente, en la función que maneja la actualización, invoco el método clear () y destroy (), obtengo los datos en la tabla html y vuelvo a crear una instancia de la tabla de datos, como tal:
¡Espero que alguien encuentre esto útil!
fuente