JQuery DataTables load json, but do not populate the table

Question

JQuery DataTables load json, but do not populate the table

Navigation

#1 by (1 votes)

0

JQuery DataTables loads json, but does not populate the table.

This is the code:

    <table id="tabla" class="table table-hover" cellspacing="0" width="100%">
        <thead>
            <tr>
                            <th>Num</th>
                            <th>ID</th>
                            <th>Nombre</th>
                            <th>Comentario</th>
                            <th>Visualizacinoes</th>
                            <th>País</th>
                            <th>Categoría</th>
                            <th>Fuente</th>
                            <th>Fuente</th>
                            <th>Fuente</th>
                            <th>Fuente</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                            <th>Num</th>
                            <th>ID</th>
                            <th>Nombre</th>
                            <th>Comentario</th>
                            <th>Visualizacinoes</th>
                            <th>País</th>
                            <th>Categoría</th>
                            <th>Fuente</th>
                            <th>Fuente</th>
                            <th>Fuente</th>
                            <th>Fuente</th>
            </tr>
        </tfoot>
</table>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.js"></script>

<script>
$(document).ready(function() {
        $('#tabla').dataTable({
                ajax: "todos.php"
                columns: [
                        {data:"number"},
                        {data:"id"},
                        {data:"name"},
                        {data:"coment"},
                        {data:"views"},
                        {data:"country"},
                        {data:"category"},
                        {data:"font"}
                ]
        });
});

</script>

This is the JSON: link

This is the result:

And here is the site uploaded:

link

The following error is displayed in the console:

jquery.dataTables.js: 4743 Uncaught TypeError: Can not read property 'length' of undefined at jquery.dataTables.js: 4743 at callback (jquery.dataTables.js: 3864) at Object.success (jquery.dataTables.js: 3894) at j (jquery.min.js: 2) at Object.fireWith [as resolveWith] (jquery.min.js: 2) at x (jquery.min.js: 5) at XMLHttpRequest.b (jquery.min.js: 5)

What am I doing wrong?

javascript jquery datatables

asked by Mathias 30.07.2018 в 08:30

source

1 answer

event on click on react Problem with $ (document) .on ("ready"

score 1 · Accepted Answer

although it is true that, as commented by Juliosor

between ajax and columns you need a comma.

I think the main problem is the call to the API. I have invoked the API in another way, specifying what your data array is, because by default, the call you made does not wait for an array of data, it waits for an object with a "data" attribute with the array. I attached the modified example with which I managed to load your table:

<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.js"></script>
</head>
<body>
    <table id="tabla" class="table table-hover" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Num</th>
                <th>ID</th>
                <th>Nombre</th>
                <th>Comentario</th>
                <th>Visualizacinoes</th>
                <th>País</th>
                <th>Categoría</th>
                <th>Fuente</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Num</th>
                <th>ID</th>
                <th>Nombre</th>
                <th>Comentario</th>
                <th>Visualizacinoes</th>
                <th>País</th>
                <th>Categoría</th>
                <th>Fuente</th>
            </tr>
        </tfoot>
    </table>

    <script>
        $(document).ready(function() {
            $('#tabla').dataTable({
                ajax: {
                    url : "http://mtvuy.000webhostapp.com/todos.php",
                    dataSrc : function ( json ) {
                        return json;
                    },
                },
                columns: [
                    {data:"id"},
                    {data:"number"},
                    {data:"name"},
                    {data:"coment"},
                    {data:"views"},
                    {data:"country"},
                    {data:"category"},
                    {data:"font"}
                ],
            });
        });

    </script>
</body>
</html>

I hope you find it useful. Greetings