This is the my script on how to load data to datatables.
$('#btnRoster').click(function(e) {
$('#dataTable').dataTable().fnDestroy();
e.preventDefault();
$.ajax({
url: '@Url.Action("GetRoster", "Home")',
type: 'GET',
dataType: "json",
success: function(response) {
var table = $('#dataTable').dataTable({
data: response,
columns: [{
'data': 'Id',
'sClass': 'hidecol'
},
{
'data': 'Name'
},
{
'data': 'Project'
},
{
'data': 'Geo.GeoName'
},
{
'data': 'Tower.TowerName'
},
{
'data': 'Region.RegionName'
},
{
'data': 'WBS.WBSName'
},
{
'data': 'Process.ProcessName'
},
{
'data': 'PrimaryTeam.PrimaryTeamName'
},
{
'data': 'IsActive'
},
{
'data': 'Gender'
},
{
'data': 'Level'
},
{
'data': 'ShiftStart'
},
{
'data': 'ShiftEnd'
},
{
'data': 'Comment'
},
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": '<button class="btn btn-sm btn-block btn-success">Edit</button>'
}
],
"order": [
[2, 'asc']
],
columnDefs: [{
"visible": false,
"targets": 0
}, ]
});
},
complete: function() {
setTimeout(function() {
$('#modal_processing').modal('hide');
}, 2000);
},
error: function(resp) {
alert("Error");
}
});
});
My goal is whenenver I click the button in a row, I just want to get the data of that row.
I follow this code from datatables : Datatables
<script type="text/javascript">
$(document).ready(function () {
var table = $('#dataTable').DataTable();
$('#dataTable tbody').on('click', 'button', function () {
var data = table.row(this).data();
alert('You clicked on ' + data[1] + '\'s row');
});
});
But when I click the button, I got an error
0x800a138f - JavaScript runtime error: Unable to get property '1' of undefined or null reference
Did i miss something?
User contributions licensed under CC BY-SA 3.0