Datatables with Bootstrap 4

Question

Datatables with Bootstrap 4

Navigation

#1 by (2 votes)

1

I am working on a project that shows a catalog of production cells because there are too many data that I throw when making the Query, I wanted to try to use the Plugque of Jquery, Datatables, try to do it first in the following way:

<!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>

In a static way, I achieve the following result:

This way I can get the values of my table in the datatable, but when I want to fill the datatable dynamically, that is, directly from my database, it does not show my table in Datatables only in a table without more, I append the code of how I want to show it dynamically:

<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>

It should be noted that I'm using Python flask, that's why the tags between the html keys.

jquery html css datatables

asked by Roger 27.10.2017 в 18:14

source

1 answer

Problem with POST requests inside a FOR loop in angularjs [closed] Passing order from one list to another

score 2 · Answer 1

To load data dynamically must be done from an ajax call, and execute it when building the table, you can not create the records of the table without the plugin's constructor.

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

Documentation: link