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 

jquery
JQuery Datatable

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:

$("#tablaRegistros").dataTable().fnDestroy();

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» 😉

 

Carlos Dk

Apasionado por la enseñanza y el SEO

35 comentarios en “Reiniciar Datatable – Cannot reinitialise DataTable.

  • el 2 enero, 2016 a las 4:27 am
    Permalink

    muy bueno me resolvio despues de estas buscando tres horas

    Respuesta
  • el 10 mayo, 2016 a las 3:29 am
    Permalink

    Gracias, estuve varias horas buscando la solucion

    Respuesta
  • el 23 mayo, 2016 a las 10:36 pm
    Permalink

    No me sirvió esa linea codigo, ya lo intente y nada sigue igual

    Respuesta
    • el 24 mayo, 2016 a las 10:06 am
      Permalink

      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!

      Respuesta
  • el 25 septiembre, 2018 a las 3:40 pm
    Permalink

    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’);
    });

    Respuesta
  • el 27 septiembre, 2018 a las 4:44 pm
    Permalink

    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

    Respuesta
  • el 22 febrero, 2019 a las 9:19 pm
    Permalink

    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.

    Respuesta
    • el 22 febrero, 2019 a las 9:23 pm
      Permalink

      Puede ser por el orden en el que estás llamando las funciones de la datatable.

      Respuesta
        • el 23 febrero, 2019 a las 8:07 am
          Permalink

          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!

          Respuesta
  • el 15 marzo, 2019 a las 2:19 pm
    Permalink

    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
    }

    Respuesta
    • el 17 marzo, 2019 a las 8:48 pm
      Permalink

      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!

      Respuesta
  • el 28 marzo, 2019 a las 2:46 pm
    Permalink

    Muchas gracias, me ayudo mucho.

    Respuesta
    • el 28 marzo, 2019 a las 3:47 pm
      Permalink

      Buenas Mauricio. Ma alegro que te sirva para tu datatable 🙂

      Gracias a ti por comentar!

      Respuesta
  • el 8 mayo, 2019 a las 12:14 am
    Permalink

    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»}
    ]
    });

    });
    });

    Respuesta
    • el 8 mayo, 2019 a las 7:25 am
      Permalink

      ¿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»

      Respuesta
  • el 18 junio, 2019 a las 5:08 pm
    Permalink

    Solucionó mi problema , gracias

    Respuesta
  • el 22 septiembre, 2019 a las 12:28 am
    Permalink

    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.

    Respuesta
    • el 23 septiembre, 2019 a las 8:19 am
      Permalink

      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.

      Respuesta
  • el 27 septiembre, 2019 a las 3:47 pm
    Permalink

    me funciono de maravilla gracias

    Respuesta
  • el 4 marzo, 2020 a las 5:49 pm
    Permalink

    Muchas gracias, después d muchos ejemplos vistos, me solucionó el tema

    Respuesta
  • el 13 agosto, 2020 a las 3:25 pm
    Permalink

    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??

    Respuesta
  • el 13 agosto, 2020 a las 7:28 pm
    Permalink

    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??

    Respuesta
    • el 13 agosto, 2020 a las 9:17 pm
      Permalink

      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.

      Respuesta

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.