我无法从 DataTable 中选择一行
[英]I can't select a row from a DataTable
问题描述
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
我有一个根据SELECT结果动态创建的DataTable，第一次创建它并没有给我任何问题，但是当我更改SELECT时，仍然重新加载表，无法访问它的数据
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在浏览器控制台中出现此错误消息： 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/ejemlo minimo/index.js:36 jQuery 2
You can see this error in https://codepen.io/jordibonarea/pen/OJvNOZB您可以在https://codepen.io/jordibonarea/pen/OJvNOZB中看到此错误
I have created a minimum code to be able to model the example: index.html我已经创建了一个能够为示例建模的最少代码：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 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谢谢
1 个解决方案
解决方案1
0 已采纳 2022-07-08 14:26:24
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.我只是更改了定义$table_modal_informes的范围，将其声明放在就绪事件处理程序之外，这样您在任何给定时间都只有一个对一个 DataTable 对象的引用。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.