Reiniciar Datatable – Cannot reinitialise DataTable.
Es posible que si estáis trabajando con llamadas AJAX utilizando una Datatable, es más que posible que necesitéis recargar información sin tener que recargar la página, en este caso, realizar una llamada AJAX sobre una datatable ya instanciada os dará error. Os explico a continuación como solucionar el error: Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
El error que os aparece es por que ya está instanciada vuestra Datatable, por lo que no podréis volver a llamar la función que rellena tal Datatable, la solución es “destruirla”. Para ello utilizaremos la siguiente función:
[codesyntax lang=”javascript”]
$("#tablaRegistros").dataTable().fnDestroy();
[/codesyntax]
Teniendo en cuenta que nuestra Datatable se llama “tablaRegistros” y que ya está instanciada, solo nos faltaría antes de volverla a recargar lanzar la función fnDestroy(). Esta función elimina por completo la instancia anterior, por lo que podremos realizar la llamada de creación otra vez sin ningún tipo de problema.
No tiene mas 😉
Si tenéis cualquier consulta podéis realizarla en estos comentarios… incluso un “gracias” 😉
Comments
muy bueno me resolvio despues de estas buscando tres horas
Perfecto 🙂 cosa de las datatables 😀
gracias me sirvio de mucho,
Gracias por agradecer 😉
Gracias, estuve varias horas buscando la solucion
Nada 🙂
No me sirvió esa linea codigo, ya lo intente y nada sigue igual
Prueba a pasársela desde los parámetros de llamada AJAX de la datatable.
fnDestroy = true;
Igualmente debería de funcionarte la anterior, pero por si la llamada no la haces en el lugar correcto, con este se destruye antes de volverse a cargar.
Salud!
Muchas Gracias! Lo probare
No es nada difícil reiniciar la datatable 🙂
Muchas gracias! Me ha ayudado mucho algo que estaba intentando solucionar desde hacía rato.
Añado mi código para compartir, por si les sirve a otros:
$.post(“RutaParaRecogerLaData.php”, SendData,
function(data) {
$(“#NombreDeLaTabla”).dataTable().fnDestroy(); //la destruimos
$(‘#resultquery’).html(data); //recogemos el html que nos devuelve el archivo php
$(‘#NombreDeLaTabla’).DataTable({ //la reiniciamos
“order”: [[ 0, “desc” ]]
});
$(‘.dataTables_length’).addClass(‘bs-select’);
});
Gracias por compartir con los demás 🙂
Carlos, realmente estoy muy agradecido. En pleno 2018 pasé casi 1 día entero buscando ésta maravillosa solución! Nuevamente muchas gracias!, saludos desde ciudad de Guatemala
Me alegra saber que el tiempo dedicado aún sirve 😉
Salud!
En mi tabla tengo child row, cuando reinicializa la tabla, no muestra lo que la child row contiene, no manda error, y si lo debuggeo si lo muestra fraccion de milesimas pero se cierra solo, y creo que es por el destroy por que si lo quito si funciona, pero si quiero volver a filtrar la tabla me marca error precisamente por que no se reinicializa.
Puede ser por el orden en el que estás llamando las funciones de la datatable.
Gracias ya lo revise!
Entiendo que ya lo solucionaste. ¿Qué te ocurría exactamente? Por si a alguien detrás le pasara lo mismo que ya tenga aquí la solución a tu caso 🙂
Gracias por comentar!
hola Tengo el siguiente código que genera una Datatable dinámicamente (llamo al código desde un botón del formulario), en ella agrego un botón para extraer los datos de la tabla y enviarlos a un formulario que esta en la misma página.
Cuando actualiza o ingreso por primera vez funciona perfectamente, pero cuando obtengo un datos de la Datatable y cierro… si vuelvo a llamar nuevamente la tabla me tira un error que me dice que la variable “dato” esta indefinida…. Estoy con esto varios dias… y no consigo solucionarlo.
te paso el código a ver si me tiran una mano.
Gracias!!!
function buscarCliente(){
$(“#buscarCliente”).on(“click”, function(){
$(‘#modBuscaCliente’).modal({show: true});
$(“#tBusqueda”).dataTable().fnDestroy();
var table = $(‘#tBusqueda’).DataTable({
“language”: {“url”: “/json/datatables/Spanish.json”},
“lengthMenu”: [[5, 10], [5, 10]],
“ajax”: {
“method”: “get”,
“url”: “/clientesSI/”,
},
“columns”: [
{“data”: “nrocliente”},
{“data”: “cliente”},
{“data”: “domicilio”},
{
“targets”: -1,”data”: null,
“defaultContent”: “”,
“className”: “text-center”
}
],
“columnDefs”: [
{“targets”: -1,”data”: null},
{“bSortable”: “false”, “targets”: 3}, {“width”: “10%”, “targets”: [0]},
{“title”: “N°”, “className”: “center”, “targets”: [0]}
]
}) /* fin de ajax */
})
var obtenerDatosCliente = function (tbody, table) {
$(tbody).on(“click”, “button.selec”, function () {
var dato = table.row($(this).parents(“tr”)).data();
var idCliente = $(“#idClienteSI”).val(dato.idcliente),
cliente = $(“#txtCliente”).val(dato.cliente),
nroCliente = $(“#txtNroCliente”).val(dato.nrocliente),
domicilio = $(“#txtDireccion”).val(dato.direccion),
});
} // Fin ObtenerDatosCliente
}
Pues en principio no veo nada raro, lo único que se me ocurre es que pongas un punto de interrupción en la línea de
var dato = table.row($(this).parents(“tr”)).data();A ver exactamente qué ocurre en ese punto, por que posiblemente el problema venga por la secuencia de llamadas, es decir, la primera vez si le de tiempo a ejecutarse como se espera, pero en la segunda vez, la destrucción tarde más y se obtenga la información de “dato”.
Lo dicho, pon un punto de interrupción en la línea mencionada anteriormente para ver como se comporta la función sobre la datatable, devolución de datos, etc…
Ya me dices!
Salud!
Muchas gracias, me ayudo mucho.
Buenas Mauricio. Ma alegro que te sirva para tu datatable 🙂
Gracias a ti por comentar!
hola que tal, trato de hacer lo mismo para que los datos se actualicen al cerrar el modal pero me da un error TypeError: col is undefined
este es mi codigo:
$(document).ready(function() {
$(‘#myModal7’).on(‘hidden.bs.modal’, function(){
$(“#example1”).dataTable().fnDestroy();
var table = $(‘#example1’).DataTable( {
“ajax”: {
“method” : “POST”,
“url”: “action/datos.php”
},
“columns”: [
{ “data”: “nombre” },
{ “data”: “fecha”}
]
});
});
});
¿En qué línea te da el error? Te está hablando del objeto “col” pero en realidad no lo veo en ese código 🙂
Al parecer tal objeto no lo tienes definido “is undefined”
Solucionó mi problema , gracias
Nada 🙂
Gracias por la traducción del problema — solución 100%
Estaba actualizando unos status de user con fetch, y mi datatable me lanzaba ese error, no me mostraba la actualización hasta que refrescaba la pág.
Camino andado. Yo tenía un problema parecido al intentar refrescar al vuelo la tabla y por eso daba el error de Cannot Reinitialise Datatable. Nada, se reinicia la instancia y listo.
me funciono de maravilla gracias
Claro que sí! Gracias por comentar 😉
Muchas gracias, después d muchos ejemplos vistos, me solucionó el tema
Nada! Me alegro 😉
Buen día.
Muchas gracias por tu recomendación y vídeo, si me sirvió, solo tengo un detalle, para buscar debo de ingresar el texto a buscar y presionar enter, solo así me busca las coincidencias, mi código quedo así:
$(document).ready(function(){
var table = $(‘#example’).DataTable({
orderCellsTop: true,
fixedHeader: true
});
$(“#example”).dataTable().fnDestroy();
//Creamos una fila en el head de la tabla y lo clonamos para cada columna
$(‘#example thead tr’).clone(true).appendTo( ‘#example thead’ );
$(‘#example thead tr:eq(1) th’).each( function (i) {
var title = $(this).text(); //es el nombre de la columna
$(this).html( ” );
$( ‘input’, this ).on( ‘keyup change’, function () {
if ( table.column(i).search() !== this.value ) {
table
.column(i)
.search( this.value )
.draw();
}
} );
} );
});
Alguna recomendación para evitar dar enter??
Ya logré filtrar por columnas con el codigo anterior pero cuando abro la pantalla me sale el mensaje:
DataTables warning: table id=tablaUsuarios – Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
Una vez “acepto” me despliega la información y puedo filtrar
Aplique $(“#tablaUsuarios”).dataTable().fnDestroy(); pero me elimina la paginación por paginas.
Alguna sugerencia que me pudieran dar??
Si trabajas con la paginación del lado del servidor, la llamada tiene que llevar los parámetros para la paginación y realizarlo desde el lado del servidor.
Es decir, tienes que manejar toda la consulta con el backend y solo devolver la parte de registros que pertenecen a esa página.
Por casualidad encontre una solucion a mi problema ya que yo trabajo desde el servidor las datatables usando django-datatbles-view que me parece una buena herramienta ya que se puede usar para tablas en bases de datos de mas de mil registros y es bastante rápida gracias por la solución que encontré en este foro
Gracias por comentar, está precisamente por eso 🙂
muchas gracias compañero estuve casi dos dias con esto, y ni sabia como buscar el termino exacto , Gracias Genio
GENIOOOO, DESDE HACE HORAS INTENTABA REINICIALIZAR EL DATATABLE CON LOS FILTROS NUEVOS QUE LE APLIQUÉ A LA BÚSQUEDA DE DATOS.
GRACIAS MILES !!!
¿Genio? Estuve pegándome de cabezazos igual que tú… por eso lo comparto 😉
Nada!