jquery - update - Cómo actualizar manualmente la tabla de datos con nuevos datos JSON

datatables update data

Question

Estoy usando las bases de datos de jQuery del complemento y cargo mis datos que he cargado en DOM en la parte inferior de la página e inicie 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, deseo obtener nuevos datos utilizando ajax (pero no la opción ajax incorporada en las tablas de datos, ¡no me malinterpreten!) y actualice la tabla con estos datos. ¿Cómo puedo hacer eso usando la API de datos? La documentación es muy confusa y no puedo encontrar una solución. Cualquier ayuda será muy apreciada. Gracias.

Answer 1

Aquí está la solución para el legado datable 1.9.4

 var myData = [
{
"id": 1,
"first_name": "Andy",
"last_name": "Anderson"
}
];
var myData2 = [
{
"id": 2,
"first_name": "Bob",
"last_name": "Benson"
}
];
$(''#table'').dataTable({
// data: myData,
aoColumns: [
{ mData: ''id'' },
{ mData: ''first_name'' },
{ mData: ''last_name'' }
]
});
$(''#table'').dataTable().fnClearTable();
$(''#table'').dataTable().fnAddData(myData2);

Answer 2

Debe destruir la instancia de la tabla de datos anterior y luego reinicializar la tabla de datos

Primero verifique si existe una instancia de tabla de datos usando $ .fn.dataTable.isDataTable

Si existe, destrúyelo y luego crea una nueva instancia como esta.

 if ($.fn.dataTable.isDataTable(''#dataTableExample'')) {
$(''#dataTableExample'').DataTable().destroy();
}
$(''#dataTableExample'').DataTable({
responsive: true,
destroy: true
});

Answer 3

En mi caso, no estoy usando el api ajax incorporado para llevar a 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 render del datatable).

Mi solución fue crear la variable en el ámbito externo de las funciones onload y la función que maneja la actualización de datos ( var table = null , por ejemplo).

Luego instalo mi tabla en el método de carga

$(function () {
//.... some code here
table = $("#detailReportTable").DataTable();
.... more code here
});

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 los datos, como tales:

function getOrderDetail() {
table.clear();
table.destroy();
...
$.ajax({
//.....api call here
});
....
table = $("#detailReportTable").DataTable();
}

Espero que alguien encuentre esto útil!

Answer 4

Puedes usar:

$(''#table'').dataTable().fnClearTable();
$(''#table'').dataTable().fnAddData(myData2);

Jsfiddle

Actualizar. Y sí, la documentación actual no es tan buena, pero si está de acuerdo con las versiones anteriores, puede consultar documentación heredada .

Answer 5

SOLUCIÓN: (Aviso: esta solución es para la versión de datos 1.10.4 (en este momento) no una versión heredada).

ACLARACIÓN Según la documentación de la API (1.10.15), se puede acceder a la API de tres maneras:

1. La definición moderna de DataTables (caso de camello superior):

   var datatable = $( selector ).DataTable();

2. La definición heredada de DataTables (caso de camello inferior):

   var datatable = $( selector ).dataTable().api();

3. Usando la new sintaxis.

   var datatable = new $.fn.dataTable.Api( selector );

Luego carga los datos como tal:

$.get(''myUrl'', function(newDataArray) {
datatable.clear();
datatable.rows.add(newDataArray);
datatable.draw();
});

Referencias API:

https://datatables.net/reference/api/clear()

https://datatables.net/reference/api/rows.add()

https://datatables.net/reference/api/draw()