Posteriormente a investigar con expertos en la materia, programadores de diversas ramas y profesores dimos con la respuesta al dilema y la plasmamos en esta publicación.
Solución:
Primero debe borrar la tabla y luego agregar nuevos datos usando la función row.add(). En el último paso, ajuste también el tamaño de la columna para que la tabla se represente correctamente.
$('#upload-new-data').on('click', function ()
datatable.clear().draw();
datatable.rows.add(NewlyCreatedData); // Add new data
datatable.columns.adjust().draw(); // Redraw the DataTable
);
Además, si desea encontrar una asignación entre las funciones API de tabla de datos antiguas y nuevas, marque esto como favorito
La respuesta aceptada llama a la draw funcionar dos veces. No puedo ver por qué eso sería necesario. De hecho, si sus datos nuevos tienen las mismas columnas que los datos antiguos, puede lograr esto en una sola línea:
datatable.clear().rows.add(newData).draw();
Estaba teniendo el mismo problema y la solución funcionaba pero con algunas alertas y advertencias, así que aquí está la solución completa, la key era verificar el objeto DataTable existente o no, en caso afirmativo, simplemente borre la tabla y agregue jsonData, si no, simplemente cree uno nuevo.
var table;
if ($.fn.dataTable.isDataTable('#example'))
table = $('#example').DataTable();
table.clear();
table.rows.add(jsonData).draw();
else {
table = $('#example').DataTable({
"data": jsonData,
"deferRender": true,
"pageLength": 25,
"retrieve": true,
Versiones
- JQuery: 3.3.1
- Tabla de datos: 1.10.20
Si para ti ha sido provechoso nuestro artículo, sería de mucha ayuda si lo compartieras con el resto juniors de este modo nos ayudas a dar difusión a nuestro contenido.