0

Buenas tardes, por favor su apoyo, al insertar los datos de un json en php a hacia un datatable no me muestra, he validado y los datos si son cargados en el php pero al jalarlos a un datatable no los muestra.

mi código getjson.php

require_once 'dbconfig.php';

$posts = array();
$query = ("SELECT * FROM user");

$stmt = $db_con->prepare($query);
$stmt->execute();

while($row=$stmt->fetch(PDO::FETCH_ASSOC)) {

    $posts['datos'][] = $row;
}

echo json_encode($posts);

este es el script que tengo en mi index.php jalando con e $.ajax los datos que tengo el getjson.php, pero no logro que sean mostrados.

 $(document).ready(function(){
    $.ajax({
                url: 'getjson.php',
                dataType: 'json',
            })

    $.each(data.datos, function(i,post){
            var newRow =
            "<tr>"
            +"<td>"+post.login+"</td>"
            +"<td>"+post.email+"</td>"
            +"</tr>";
            $(newRow).appendTo("#json-data tbody");
        });
        $('#json-data').DataTable();
    });

hice unas pruebas reemplazando el $.ajax por datos temporales y los muestra sin ningun problema.

$(document).ready(function(){
 var data = {
    'datos':
    [
        {'login':'si', 'email':'[email protected]'},
        {'login':'si', 'email':'[email protected]'}
    ]
};           

$.each(data.datos, function(i,post){
    var newRow =
      "<tr>"
       +"<td>"+post.login+"</td>"
       +"<td>"+post.email+"</td>"
       +"</tr>";
     $(newRow).appendTo("#json-data tbody");
   });
  $('#json-data').DataTable();
});

Su apoyo indicandome en que me estoy equivocando al jalar y mostra los datos del getjson.php dentro del $.ajax

2 respuestas 2

0

El posible error es que no gestiona la respuesta de la petición Ajax por lo tanto la variable data no existe y mucho menos data.datos.

Para la llamada Ajax con éxito sería conveniente emplear done (exito de la llamada)

$(function() {
    $.ajax({
        url: 'getjson.php',
        dataType: 'json',
    })
    .done(function(data){
        $.each(data.datos, function(i,post){
            var newRow =
            "<tr>"
            +"<td>"+post.login+"</td>"
            +"<td>"+post.email+"</td>"
            +"</tr>";
            $(newRow).appendTo("#json-data tbody");
        });
    });
    $('#json-data').DataTable();
});

También podría haber pasado un array de configuración a DataTables y que este se encargue de añadir las filas directamente.

HTML

<table id="json-data">
    <thead>
        <tr>
            <th>Login</th>
            <th>Email</th>
        </tr>
    </thead>
</table>

JS

$(function() {
    $('#json-data').DataTable( {
        "processing": true,
        "ajax": {
          "url": "getjson.php", 
          "dataSrc": "datos" //indice del array retornado
       },
        "columns": [ // Aquí los nombres de las columnas que devuelve PHP
            { "data": "login" },
            { "data": "email" },
        ]
    });
});
1
  • MUCHAS GRACIAS !!! Genial, ahora entendí el porqué no estaba llamando. nuevamente muchas gracias.
    – Carlos
    Commented el 1 oct. 2017 a las 21:30
0

Mientras qe se realiza tu lamda AJAX, se ejecuta el each porque AJAX realiza una llamada asíncrona. Una solución sería meter el each dentro de la función success de la función $.ajax:

$.ajax({
    url: 'getjson.php',
    dataType: 'json',
    success: function (datos) {

        $.each(data.datos, function(i,post){
            var newRow =
            "<tr>"
            +"<td>"+post.login+"</td>"
            +"<td>"+post.email+"</td>"
            +"</tr>";
            $(newRow).appendTo("#json-data tbody");
        });

        $('#json-data').DataTable();


    }
});
0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.