1

Estoy trabajando en un proyecto que muestra un catalogo de celdas de producciónm debido a que son demasiados datos los que me arroja al hacer el Query, quise intentar utilizar el Plugind de Jquery, Datatables, intente primero hacerlo de la siguiente manera:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Zona</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.css">

    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script>
    <script>
        $(document).ready(function() {
            $('#grid').DataTable();
        });
    </script>

</head>

<body>
    <div>
        <table id="grid" class="table table-striped table-bordered dt-responsive nowrap">
            <thead>
                <tr>
                    <th>Numero Zona</th>
                    <th>Nombre Zona</th>
                    <th>Perimetro</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>1</td>
                    <td>Zona 1</td>
                    <td>Perimetro 1</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Zona 2</td>
                    <td>Perimetro 2</td>
                </tr>
            </tbody>

        </table>
    </div>

</body>
</html>

De una forma estatica, logro el siguiente resultado:

introducir la descripción de la imagen aquí

De esta manera si puedo obtener los valores de mi tabla en el datatable, pero cuando quiero llenar el datatable de modo dinamico, es decir, directamente desde mi base de datos, no me muestra mi tabla en Datatables solo en una tabla sin más, anexo el código de como lo quiero mostrar dinamicamente:

<div class="tabla">
<table id="grid" class="table table-hover dt-responsive nowrap ">
    <thead>
        <tr>
            <th>Hostname</th>
            <th>Bay</th>
            <th>Rack</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>

        {% for row in result %}
        <tr>
            <td>
                {{row ['HOSTNAME']}}
            </td>
            <td>
                {{row ['BAY']}}
            </td>
            <td>
                {{row ['RACK']}}
            </td>
            <td>
                {{row ['DESCRIPTION']}}
            </td>
            <td>
                <!-- Button trigger modal -->
                <button type="button" class="boton btn btn-primary" data-toggle="modal" data-target="#ModalLong">Edit </button> </td>
        </tr>
        <tr>
        </tr>
        {% endfor%}
    </tbody>
</table>

Cabe destacar que estoy utilizando Python flask, por eso las etiquetas entre llaves del html.

9
  • Estás usando ajax para cargar los datos dinámicos? Commented el 27 oct. 2017 a las 16:15
  • No, lo hago mediante Python y Flask
    – Roger
    Commented el 27 oct. 2017 a las 16:17
  • Debes ejecutar $('#grid').DataTable(); justo después de que la tabla tenga todos los datos que vas a mostrar, también revisa si te saca algún error en consola Commented el 27 oct. 2017 a las 16:20
  • @CamiloVasquez, eso exactamente hago, cheque los errores de consola y me muestra lo siguiente : Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript. at bootstrap.min.js:6 segun yo, es problema de colocar el JS de Jquery antes que el de Bootstrap, ya lo realize, pero de igual manera me muestra lo mismo.
    – Roger
    Commented el 27 oct. 2017 a las 16:42
  • Claro, primero debes llamar jquery, luego datatables y por último bootstrap, es extraño que te siga sacando ese error si ya lo tienes en el orden que debe ser Commented el 27 oct. 2017 a las 16:44

1 respuesta 1

2

Para cargar datos de forma dinámica debe de hacerse desde una llamada ajax, y ejecutarla al construir la tabla, no puedes crear los registros de la tabla sin el constructor del plugin.

$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "../server_side/scripts/server_processing.php"
    } );
} );

Documentación: https://datatables.net/examples/data_sources/server_side.html

2
  • Muchas gracias, eso resuelve completamente mi duda del porque no puedo hacerlo. Ahora, sé más o menos como funciona ajax, pero todos los ejemplos que encuentro es con php, no sé como implementarlo de una manera correcta para python flask ¿podrias ayudarme?.
    – Roger
    Commented el 27 oct. 2017 a las 17:45
  • @Roger sinceramente no conozco Python Flask. Pero no tiene nada de complejidad el suministrale datos al plugin. Lo que recibe es un objeto JSON, por lo que debes de ver como transformar tu data en un objeto JSON, imprimirla y en el apartado de ajax darle la ruta de donde lo haz suministrado. Espero y me explique.
    – Gibrán
    Commented el 27 oct. 2017 a las 19:28

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.