我无法从数据表中选择行

我有一个根据SELECT结果动态创建的数据表，第一次创建时它没有给我任何问题，但是当我改变SELECT时，仍然重新加载表，它的数据无法访问

在浏览器控制台中出现以下错误消息:未捕获TypeError:无法访问属性"name", informe是未定义的文件:///C:/用户/乔迪。布尔戈斯/下载/比如缩印版/index.js: 40jQuery 8文件:///C:/用户/乔迪。布尔戈斯/下载/比如缩印版/index.js: 36jQuery 2

您可以在https://codepen.io/jordibonarea/pen/OJvNOZB

中看到此错误我已经创建了一个最小的代码，能够模拟的例子: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>');
});
});
});

感谢

我只是改变了$table_modal_informes定义的范围，将其声明放在ready事件处理程序之外，以便您在任何给定时间只有一个对一个DataTable对象的引用。

正如您在代码片段中看到的那样，现在您可以随时从表中自由选择行，即使在从相应的下拉列表中更改所选数据表之后:

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>

相关内容

最新更新

热门标签：