1

estoy intentando montar una tabla dinámica con Jquery Datatables usando los datos públicos de una api, para ello tengo este código en el layout de blade

Aquí cargo los cdn de jquery y datables

<script src="https://code.jquery.com/jquery-3.4.1.min.js"  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>

En el formulario tengo el siguiente código

@extends('layout')

@section('content')

<div class="container">

    <table id="example" class="display" style="width:100%">
        <thead>
        <tr>
            <th>User Id</th>
            <th>Id</th>
            <th>Title</th>
            <th>Completed</th>
        </tr>
        </thead>
        <tfoot>
        <tr>
            <th>User Id</th>
            <th>Id</th>
            <th>Title</th>
            <th>Completed</th>
        </tr>
        </tfoot>
    </table>

</div>

</body>

<script type="text/javascript">

    $(document).ready(function() {
        $('#example').DataTable( {
            "ajax": "https://jsonplaceholder.typicode.com/todos",
            "dataSrc": "",
            "columns": [
                { "data": "userId" },
                { "data": "id" },
                { "data": "title" },
                { "data": "completed" },
            ]
        } );
    } );

</script>

@endsection

El error que me da es este, y hace que no me cargue los datos de la tabla.

 Uncaught TypeError: Cannot read property 'length' of undefined
1

1 respuesta 1

2

Para que te funcione debes dejar el código tal que así:

<script type="text/javascript">

    $(document).ready(function() {
        $('#example').DataTable( {
            "ajax": {url:"https://jsonplaceholder.typicode.com/todos", dataSrc:""}
            "dataSrc": "",
            "columns": [
                { "data": "userId" },
                { "data": "id" },
                { "data": "title" },
                { "data": "completed" },
            ]
        } );
    } );

</script>

Ya que te faltaba en el apartado "ajax" añadir dataSrc

2

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.