[英]jquery datatables plug-in issue
I am using jquery datatables and adapted the following example 我正在使用jquery数据表并改写以下示例
/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Full name:</td>'+
'<td>'+d.name+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extension number:</td>'+
'<td>'+d.extn+'</td>'+
'</tr>'+
'<tr>'+
//IMPORTANT PART
'<td>' + '<input type="text" id="inp">' + '</td>'+
'<td>' + '<button id="butt">' + 'click' + '</button>' + '</td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": "../ajax/data/objects.txt",
"columns": [
{
"class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "salary" }
],
"order": [[1, 'asc']]
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
} );
The output of this code is shown here http://www.datatables.net/examples/api/row_details.html In the row child for each row I've added an input box and a button from where I want to handle the input of the user. 此代码的输出显示在此处http://www.datatables.net/examples/api/row_details.html在每行的行子代中,我添加了一个输入框和一个按钮,我想从中处理输入用户。 For instance, I would like to take the input of the user and construct a link which will open a new window.
例如,我想接受用户的输入并构建一个链接,该链接将打开一个新窗口。 However, I could not find in the documentation events related to children of the rows in the datatables library?
但是,我在文档中找不到与datatables库中的行的子级相关的事件吗? For example, I would like to do something like
例如,我想做类似的事情
$('#example tbody').on('click', '#butt', function () {
//do something
});
the id 'butt' above is a button which is part of the row child. 上面的ID“对接”是一个按钮,是行子项的一部分。 In other words, I would like to manipulate the elements in the row child, not the row itself.
换句话说,我想操纵行子元素,而不是行本身。
Since datatables adds the element to the DOM you'll have to use a delegate for selection, something like: 由于数据表将元素添加到DOM中,因此您必须使用委托进行选择,例如:
$('body').on('click', '#example tbody #butt', function () {
//do something
});
It doesn't necessarily have to be body
, but you'll need an element that is not dynamically added to the DOM for jQuery to use. 它不一定必须是
body
,但是您需要一个没有动态添加到DOM的元素,jQuery才能使用。
Also, ID's should be unique, so you won't want to add a button with the same ID to every row. 另外,ID应该是唯一的,因此您不想在每行中添加具有相同ID的按钮。 If you need to add multiple buttons you'll want to use a class, bind to the elements with that class, and then handle each one to get the appropriate context.
如果需要添加多个按钮,则需要使用一个类,将其绑定到该类的元素,然后处理每个按钮以获取适当的上下文。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.