如何通过单击DataTables中的每个列按钮来获取列值？
Sad*_*man 2 javascript jquery jsp datatables
我正在尝试为数据表可扩展行框架上的每一列设置编辑按钮。
如何通过单击DataTables中的每个列按钮来获取列值？当我单击按钮时，我得到的数据1和数据 [2] 值未定义。谁能告诉我我哪里做错了？请参阅包含的图像和片段。
<script>
$(document).ready(function () {
var table = $('#example').DataTable({
"ajax": "user.json",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{"data": "Name"},
{"data": "Phone"},
{"data": "Role"},
{
"targets": -1,
"data": null,
"defaultContent": "<button>Edit</button>"
}
],
"order": [[1, 'asc']]
});
$('#example tbody').on('click', 'button', function () {
var data = table.row($(this).parents('tr')).data();
alert(data[1] + "'s Phone is: " + data[2]);
});
// 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');
}
});
});
</script>
<html>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Phone</th>
<th>Role</th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Phone</th>
<th>Role</th>
<th></th>
</tr>
</tfoot>
</table>
</html>
您需要使用Object.keys
此外，我建议您使用.closest函数，因为您需要返回第一个匹配项。
$('#example tbody').on('click', 'button', function () {
var data = table.row($(this).closest('tr')).data();
alert(data[Object.keys(data)[0]]+' s phone: '+data[Object.keys(data)[1]]);
});
| 归档时间： |
|
| 查看次数： |
7480 次 |
| 最近记录： |