Ahora veremos como podemos poblar una DataTable pero utilizando una fuente de datos externa. Para este ejemplo simularé que la respuesta proviene de una petición realizada mediante AJAX al servidor, enviando de regreso archivo .json pero con los datos en formato JSON.
Documento HTML con ejemplo:
[html] 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DataTable Tutorial</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="well">
                <div class="row">
                    <div class="col-sm-10 col-sm-offset-1">
                        <table id="mi-tabla" class="table table-striped">
                            <thead>
                            <tr>
                                <th>Framework</th>
                                <th>Lenguaje</th>
                                <th>Tipo</th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery.js"></script>
<script src="js/jquery.dataTables.js"></script>
<script src="js/dataTables.bootstrap.js"></script>
<script>
    $.get('datos.json', function (response) {
        $('#mi-tabla').DataTable({
            data: response
        });
    });
</script>
</body>
</html>

 [/html]

Documento JSON con los datos a utilizar:
[js]
[
  {
    "0": "Laravel",
    "1": "PHP",
    "2": "Backend"
  },
  {
    "0": "React",
    "1": "Javascript",
    "2": "Frontend"
  },
  {
    "0": "Ruby on Rails",
    "1": "Ruby",
    "2": "Backend"
  },
  {
    "0": "Django",
    "1": "Python",
    "2": "Backend"
  },
  {
    "0": "Spring",
    "1": "Java",
    "2": "Backend"
  },
  {
    "0": "Vue",
    "1": "Javascript",
    "2": "Frontend"
  },
  {
    "0": "Express",
    "1": "Javascript",
    "2": "Backend"
  }
]
[/js]  

Observaciones:
  • El número de encabezados en el [code]<thead></thead>[/code] debe ser igual al número de campos en el cuerpo; de otra forma es posible que obtengan un error al momento de renderizarla o que la información no sea desplegada de forma correcta.
  • Entre las etiquetas [code]<tbody></tbody>[/code] no se debe definir ninguna información de otra forma cualquier información existente sera borrada. Nuestra instancia de la DataTable es la que se encargara de poblar la misma tabla.
  • La información que vaya a utilizarse para poblar la tabla debe proveerse en formato JSON ARRAY.
  • Como pueden observar en el archivo datos.json todos los arreglos deben ser de TIPO NUMÉRICO, de otra forma al momento de renderizarla la DataTable no sera visualizada de forma correcta y aparecerán errores.
Les adjunto los archivos y la configuración que he utilizado en el siguiente repositorio de GItHub: https://github.com/eichgi/datatables, el repositorio se irá actualizando con mas ejemplos a medida que vayamos avanzando. Si tienes alguna sugerencia o aclaración por favor no dudes en hacérmelo saber en los comentarios.
Tags:

Leave a Reply