Home / Questions / 500429
Accepted
ALDO56
Asked: 2022-05-01 09:00:57 +0800 CST 2022-05-01 09:00:57 +0800 CST

How can I consume a json with ajax and display the data with Jquery's DataTables Plugin?

  • 772

I'm trying to consume an api and then display it in a table via ajax with Jquery's DataTables Plugin but I'm not getting the table to load with the data

<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>
 src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.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>

> este es el script que deberia consumir el json

<script>

$('#tabla').dataTable({
  ajax: {
    cache: true,
    url: `https://my-json-server.typicode.com/AldoArevalo%20/repoaldo/aguinaldo`,
    dataSrc: 'data.results'
  },
  columns: [{
    "data": "AACAA_PADR"
  }, {
    "render": function(v, t, data) {
      return `<img width="100" src="${ data.thumbnail.extension}"/>`;
    }
  }, {
    "data": "AACAA_BANC"
  }, {
    "data": "AACAA_CEDU"
  }]
});
</script>
<!DOCTYPE html>
<html lang="es">
    <head>


</head>

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

php

1 Answers

  1. Best Answer

    Directly entering the provided URL, the following result is obtained:

    [
  {
    "AACAA_PADR": 12800,
    "AACAA_BANC": 26,
    "AACAA_CEDU": 3524244,
    "AACAA_APOR_AGUI": 5500000,
    "AACAA_CANT_CUOT": 12,
    "AACAA_IMPO_CUOT": 1800000,
    "AACAA_AAMD_LIQU": 1800000,
    "AACAA_TOTA_PAGA": 20000000,
    "AACAA_AAMM_INIC": " 01-01-2010 "
  }
]

    There isn't a property results, it's just used dataand there isn't a property either thumbnail, so it throws an error.

    $('#tabla').dataTable({
  ajax: {
    cache: true,
    url: `https://my-json-server.typicode.com/AldoArevalo%20/repoaldo/aguinaldo`,
    // Los datos vienen directamente, se debe dejar cadena vacía
    dataSrc: ''
  },
  columns: [
      {
          "data": "AACAA_PADR"
      },
      /* Omitiendo esta columna se crea la tabla correctamente
      {
          "render": function(v, t, data) {
              // No existe la propiedad thumbnail y eso genera error
              return `<img width="100" src="${ data.thumbnail.extension}"/>`;
          }
      },
      */
      {
        "data": "AACAA_BANC"
      }, {
          "data": "AACAA_CEDU"
      }
  ]
});
    <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>

    • 0