我正在尝试使用 DataTables 创建一个 JSON 交付的表，并让该表在单击表中的某些链接时执行“操作”。链接并不总是存在，因此需要动态生成。 我刚刚开始使用 jQuery，并且很难弄清楚我所说的“附加”到正确元素的回调是什么。
这是一个示例 HTML 页面，带有动态生成的“向上”链接(在普通的旧 JS 中相当幼稚)。这个想法是，点击该链接将例如生成一个警报，显示您单击的行以及上面的行。最终目标是能够使用链接/按钮向上或向下移动行。
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Show a re-orderable list</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" />
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
</head>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"> </script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"> </script>
<script type="text/javascript" class="init">
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": "foo_data.txt",
"columnDefs": [
{
"render": function ( data, type, row ) {
var extra_text = "";
if( data === "Queued" ) {
extra_text = ' <a href="#" class="up_queue">Up</a> Down ';
}
return data +' ('+ row[3]+')' + extra_text;
},
"targets": 1
},
{ "visible": false, "targets": [ 3 ] }
]
} );
$(".up_queue").on('click', function() {
var mydata = table.row( this ).data();
var uprow = table.row( this ).index() - 1;
var updata = table.row( uprow) .data();
alert( 'You clicked on '+mydata[0]+ ' ' +updata[0] +' row' );
});
} );
</script>
<body>
<div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Job ID</th>
<th>Status</th>
<th>Name</th>
<th>Elapsed Time</th>
<th>Options</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
本质上，问题是“向上”链接没有执行任何操作...我想知道单击了哪一行，以及被点击者正上方的行的索引。有什么想法吗？
这是可以通过 AJAX 提供的关联数据 foo_data.txt:
{
"data":
[["101","Finished","Static","3 days",""],
["102","Queued","Moveable1","--",""],
["103","Queued","Moveable2","--",""],
["104","Queued","Moveable3","--",""],
["105","Queued","Moveable4","--",""],
["106","Queued","Moveable5","--",""],
["107","Queued","Moveable6","--",""]]}
最佳答案
原因是链接不起作用，因为它在您附加事件处理程序时不存在。您需要改用委托(delegate)事件处理程序。
$('#example').on('click', ".up_queue", function() {
var mydata = table.row( this ).data();
var uprow = table.row( this ).index() - 1;
var updata = table.row( uprow) .data();
alert( 'You clicked on '+mydata[0]+ ' ' +updata[0] +' row' );
});
参见jQuery DataTables – Why click event handler does not work了解更多信息。
另一方面，请考虑使用 RowReorder扩展提供了更好的行重新排序功能。
关于javascript - 使用 jQuery 在 DataTables 表中创建动态链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34855504/