JSon Invalid en Datatable. Como solucionarlo

Bienvenidos a Vertutoriales y a esta serie de tutoriales relacionados con Datatables, en esta ocasión vamos a ver como depurar y detectar exactamente donde radica el problema del JSon Invalid que nos devuelve el método de conexión AJAX de la datatable.

jquery

Datatables con JQuery

Es más que típico que durante la programación de nuestra datatable lleguemos a sufrir algún imprevisto por la carga de datos, una muy común es que la Datatable no recibe el JSon esperado y como tal da un problema bastante claro que nos dice que visitemos la página http://datatables.net/tn/1. Lo único que encontraremos en esta página es como ha de recibir la información la datatable para “solucionar” el formato inválido.

Yo os traigo un pasito más, ya que puede ser que estemos montando correctamente el JSon que necesita nuestra datatable, pero por algún motivo diferente no lo pueda estar montando, para ello hace falta depurar y ver la respuesta que nos ofrece la llamada AJAX y como tal, evaluar las posibles soluciones.

En el caso que muestro en vídeo, al pulsar el botón derecho e inspeccionar elemento (mostrar la consola del navegador) selecciono network para ver la comunicación que hay. Cuando lanzo la llamada, selecciono response y analizo el resultado. En nuestro caso está en el propio SQL que llama a la base de datos, no existe un campo que estoy intentando cargar, por lo que PHP devuelve error y lo incrusta en el resultado devuelto. Esto a su vez es un JSon Invalid.

A continuación avanzo otro poco más y vemos que tampoco toma correctamente la carga de datos, en realidad está el JSon ya solucionado, pero el DATA que recibe la datatable está cambiado, ya que el campo que estaba intentando cargar posee otro nombre, el mismo que se estaba llamando en la SQL, así que simplemente se cambia por el correcto y listo.

¿Sencillo no? Depurar las llamadas y los resultados puede ahorrar mucho tiempo si sabéis trabajar de esta manera.

Como siempre, espero que os sirva. Si queréis agradecerlo podéis hacer me gusta o compartir este artículo, sino, podéis también comentar como mejorar. Ni que decir, si tenéis cualquier consulta podéis realizarla desde los comentarios del tutorial.

Te puede interesar:

8 comentarios

  • ROberto Gomes commented on 25 octubre, 2016 Reply

    Hola amigo te agradecería bastante si me pudieses ayudar, mi problema es que no me muestra los resultados.
    //este es mi html

    Nombre
    Apellido Paterno
    Apellido Materno
    DNI
    Celular
    Teléfono
    Email
    Dirección
    Mod.
    Hab. / Inh.

    Nombre
    Apellido Paterno
    Apellido Materno
    DNI
    Celular
    Teléfono
    Email
    Dirección
    Mod.
    Hab. / Inh.

    //este es mi ajax

    function lista_personal()
    {
    $.ajax({
    url: “../conexion/conexion_persona.php”,
    type: “POST”,
    async: false,
    cache: false,
    data:
    {
    lista_personal: 1
    },
    success: function (re)
    {
    $(‘#lista_personal’).html(re);
    }
    });
    }

    //este es mi conexion con la base de datos

    if (isset($_POST[‘lista_personal’])) {
    $sql = “select * from personal”;
    $result = mysql_query($sql);
    while ($row = mysql_fetch_object($result)) {
    echo ”
    $row->nombre
    $row->apellido_pat
    $row->apellido_mat
    $row->nro_doc_identific
    $row->celular
    $row->telefono
    $row->email
    $row->direccion

    idpersona’ class=’mosProfe’>

    “;
    if($row->estado==’1′){
    echo ”

    idcomida’ class=’inhprof’>

    “;
    }else{
    echo ”

    idcomida’ class=’habprof’>

    “;
    }
    $count++;
    }
    exit();
    }

    • Carlos Dk commented on 28 octubre, 2016 Reply

      Revisa varias cosas:
      – Prueba a igualar el valor del enlace a una variable y a concatenarlo, en vez de ponerlo todo de seguido.
      – Tienes 9 o 10 columnas? de bbdd devuelves 10.
      – La estructura que tiene que devolver es muy concreta, revisa el tutorial, por que creo que ahí tienes otro problemas 😉

  • Santiago commented on 24 mayo, 2017 Reply

    Hola un cordial saludo, bueno he probado tu código y no logro hacer que me funcione, me genera la advertencia que te muestra en el vídeo, tal ves puedas ayudarme.

    Este el código que utilizo:

    id
    examen
    precio

    Este es el script de datatables.

    $(document).ready(function() {
    $(‘#example’).DataTable( {
    “ajax”:”precios_datatable.php”,
    “columns”: [
    {“data”: “id”},
    {“data”: “examen”},
    {“data”: “precio”}

    ]
    } );
    } );

    y este es el archivo php.

    ?>

    • Carlos Dk commented on 20 junio, 2017 Reply

      El archivo PHP no puedo verlo 🙁
      Pero seguro que está malformando la información a devolver

  • Santiago commented on 24 mayo, 2017 Reply

    Disculpa ya me funciona, un cordial saludo.

  • Jaime Salazar commented on 26 julio, 2017 Reply

    Buenas noches, he seguido al pie de la letra el tutorial para subsanar el error he probado tu código y no logro hacer que me funcione, sigue el mensaje de advertencia.
    Archivo listar.php
    query($query);

    if (!$resultado){
    die(“error”);

    }
    else{
    $arreglo[“data”] = [];
    while ($data=mysqli_fetch_assoc($resultado)){
    $arreglo[“data”][] = $data;

    }
    echo json_encode($arreglo);

    }
    mysqli_free_result($resultado);
    mysqli_close($mysqli);
    ?>

    Archivo indice1.html

    $(document).on(“ready”, function(){
    listar();
    });

    var listar = function(){
    var table = $(‘#dt_usuario’).DataTable({
    “ajax” : {
    “method” : “POST”,
    “URL” : “listar.php”
    },
    “columns” : [
    {“data” : “usuario”},
    {“data” : “nombre”},
    {“data” : “correo”}
    ]

    });

    }

    • Carlos Dk commented on 1 agosto, 2017 Reply

      Si el problema es invalid json, el problema lo tienes en el php, has mirado en el inspector lo que está devolviendo esa consulta?

Deja un comentario

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