I am trying to set edit button for each column on Datatables expandable row framework.
How to get column value with click of each column button in DataTables? When I click a button I'm getting data1 and data[2] value undefined. Can anyone tell me where I am doing wrong? Please refer to the image and snippet included.
<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>
I am trying to set edit button for each column on Datatables expandable row framework.
How to get column value with click of each column button in DataTables? When I click a button I'm getting data1 and data[2] value undefined. Can anyone tell me where I am doing wrong? Please refer to the image and snippet included.
<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>
- can you provide us with your html? or better yet a fiddle? – Hoang Vu Commented Nov 30, 2016 at 17:26
- @Hoang Thanks for your ments. After <script> That's all HTML code referring to this code. – Sadequer Rahman Commented Nov 30, 2016 at 17:30
1 Answer
Reset to default 6You need to use Object.keys
Further more, I remend you to use .closest function, because you need to return the first match.
$('#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]]);
});
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742313983a4420464.html
评论列表（0条）