1

intento mostrar los datos que vienen de la API de marvel dentro de un DataTables Plugin de Jquery, pero me acaba diciendo loading... y no muestra sus datos.

 var ts = Date.now();
 var publicKey = ' ' // por seguridad no van las apis en este codigo
 var privatekey = ' ' // por seguridad no van las apis en este codigo
 var hash = $.md5(ts + privatekey + publicKey);


 $.get({
     url : 'https://gateway.marvel.com/v1/public/characters?' + "&ts=" + ts + "&apikey=" + publicKey + "&hash=" + hash,
     success : function(respuesta) {
        console.log(respuesta);
     }
 });

            $('#tabla').dataTable({
                "json": "(respuesta.data.results)",

                "columns" : [ 
                    { "data": "id" },
                    { "data": "name" },
                    { "data": "description" },
                ]
            });
0

2 respuestas 2

1

Podrías configurar el DataTable para que haga directamente la llamada ajax:

  • ajax.cache: seteado a true, para desactivar el parámetro _
  • ajax.url: para indicar la fuente de datos
  • ajax.dataSrc: para indicar donde estan los registros en la respuesta.
  • [Opcional] columns.render: Para customizar la visualización de datos.

Ejemplo:

var ts = Date.now();
var publicKey = prompt('Ingresa tu clave pública:'); // por seguridad no van las keys en este codigo
var privatekey = prompt('Ingresa tu clave privada:'); // por seguridad no van las keys en este codigo
var hash = $.md5(ts + privatekey + publicKey);

$('#tabla').dataTable({
  ajax: {
    cache: true,
    url: `https://gateway.marvel.com/v1/public/characters?&ts=${ts}&apikey=${publicKey}&hash=${hash}`,
    dataSrc: 'data.results'
  },
  columns: [{
    "data": "id"
  }, {
    "render": function(v, t, data) {
      return `<img width="100" src="${data.thumbnail.path + '.' + data.thumbnail.extension}"/>`;
    }
  }, {
    "data": "name"
  }, {
    "data": "description"
  }]
});
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js"></script>
<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<table id="tabla" class="display" style="width:100%"></table>


Referencias:

2
  • Funciona perfecto, gracias. Una pequeña duda; ¿Cómo lo hago con esta ruta de imágen para incluirla dentro de un "data:" imagen_personaje.attr('src', personaje.thumbnail.path + '/landscape_small.' + personaje.thumbnail.extension)
    – GhostCoder
    Commented el 6 jun. 2020 a las 2:32
  • @SebaLagos, actualice mi respuesta para darte un ejemplo de como hacerlo.
    – Marcos
    Commented el 8 jun. 2020 a las 13:47
0

Intenta con esto, solo cambia el id de la tabla y pon los nombres de las columnas

    $.ajax({
    url : 'https://gateway.marvel.com/v1/public/characters',
    type: 'GET',
    data: { 
        ts : ts, 
        apikey : apikey,
        hash : hash,
    } ,
    success : function(data) {                    
        data = JSON.parse(data);
        dt = $('#tabla').DataTable( {
            "bDestroy": true,
            "aaData": data,
            "lengthMenu": [ [10, 25, 50, 100, -1], [10, 25, 50,100,"Todos"]],
            "aoColumns": [
                { "mData": "columna1" },
                { "mData": "columna2" },
                { "mData": "columna3" },
                { "mData": "columna4" },
            ]
        })
    }
   }):

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.