I can't select a row from a DataTable-CodePudding

I have a DataTable that is created dynamically according to the result of a SELECT, the first time it is created it does not give me any problem, but when I change the SELECT, still reloading the table, the data of it cannot be accessed

In the browser console appears this error message: Uncaught TypeError: can't access property "name", informe is undefined file:///C:/Users/jordi.burgos/Downloads/ejemplo minimo/index.js:40 jQuery 8 file:///C:/Users/jordi.burgos/Downloads/ejemplo minimo/index.js:36 jQuery 2

You can see this error in https://codepen.io/jordibonarea/pen/OJvNOZB

I have created a minimum code to be able to model the example: 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>

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('<h3>'   informe.name  '</h3>');
        });
    });
});

Thanks

CodePudding user response：

I just changed the scope where $table_modal_informes is defined putting its declaration outside of the ready event handler so that you'll have only one reference to one DataTable object at any given time.

As you can see in the snippet, now you are free to select rows from the table any time also after the selected data table was changed from the corresponding dropdown:

var $tabla_modal_informes;

$(document).ready(function () {

    $('#prueba_select').change(function (e) { 
        
        e.preventDefault();
         $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 (event) {
            //$tabla_modal_informes.rows().deselect();
            // Ontiene datos de la fila seleccionada            
            let informe = $tabla_modal_informes.row(this).data();
            $('#item_selected').html('<h3>'   informe.name  '</h3>');
        });
    });
});

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