No puedo acceder a los datos de la tabla si la recargo
No puedo acceder a los datos de la tabla si la recargo
jordibonarea
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
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