No puedo acceder a los datos de la tabla si la recargo

No puedo acceder a los datos de la tabla si la recargo

jordibonareajordibonarea Posts: 2Questions: 1Answers: 0

Link to test case:
Debugger code (debug.datatables.net) **: ucotaq (Private)
**Error message
:
Uncaught TypeError: can't access property "name", informe is undefined
<anonymous> file:///C:/Users/jordi.burgos/Downloads/ejemplo minimo/index.js:40
jQuery 8
<anonymous> file:///C:/Users/jordi.burgos/Downloads/ejemplo minimo/index.js:36
jQuery 2
Problema: Tengo un dataTable que se carga cada vez que altero un elemento <SELECT>, la primera vez funciona bien, pero cuando cambio el SELECT y recarga la tabla aparece un error que no enceuntra ningún dato de la misma

Archivo index.js

$(document).ready(function () {

    $('#prueba_select').change(function (e) { 
        e.preventDefault();
        var $tabla_modal_informes = $('#table_prueba').DataTable({
            destroy: true,
            "data": [
                {
                    "name":       "Tiger Nixon",
                    "position":   "System Architect",
                    "salary":     "$3,120",
                    "start_date": "2011/04/25",
                    "office":     "Edinburgh",
                    "extn":       5421
                },
                {
                    "name": "Garrett Winters",
                    "position": "Director",
                    "salary": "5300",
                    "start_date": "2011/07/25",
                    "office": "Edinburgh",
                    "extn": "8422"
                },
                // ...
            ],
            "columns": [
                { "data": "name" },
                { "data": "position" },
                { "data": "office" },
                { "data": "extn" },
                { "data": "start_date" },
                { "data": "salary" }
            ]
        });
        //cuando hacemos click en sus filas
        $('#table_prueba').on('click','tr',function () {
            //$tabla_modal_informes.rows().deselect();
            // Ontiene datos de la fila seleccionada
            let informe = $tabla_modal_informes.row(this).data();
            $('#item_selected').html('<p>' + informe.name +'</p>');
        });
    });
});

Archivo index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo mínimo</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <!-- DataTables -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
    <script src="index.js"></script>
</head>
<body>
    <h1>Este es el ejemplo mínimo para que de error el DataTable</h1>
    <select name="prueba_select" id="prueba_select">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <table id="table_prueba"></table>
    <div id="item_selected">
        
    </div>
</body>
</html>

Agradezco cualquier ayuda

Answers

  • jordibonareajordibonarea Posts: 2Questions: 1Answers: 0

    Ya me han encontrado la solución: debía declarar la variable var $tabla_modal_informes fuera del ámbuto de la función document.ready().
    Ahora ya funciona según lo deseado. Gracias a todos

Sign In or Register to comment.