I am trying to get the data in a row when a button is clicked. However, I don't see any data returned, infact this line fails to execute. Here is my code:
<html>
<head>
<title>DataTables example - Javascript sourced data</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script>
var dataSet = [
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"position": "Director",
"salary": "$5,300",
"start_date": "2011/07/25",
"office": "Edinburgh",
"extn": "8422"
}
];
$(document).ready( function() {
$('#example').DataTable( {
data: dataSet, //Can ajax: here
columns: [
{data: "name", title: "Name"},
{data: "position", title: "Position"},
{data: "office", title: "Office"},
{data: "extn", title: "Extn"},
{data: "start_date", title: "Start Date"},
{data: "salary", title: "Salary"},
{data:null, title:"Prodlog",
"fnCreatedCell": function( nTd, sData, oData, iRow, iCol) {
$(nTd).html( "<button>Click!</button>" );
}
}
]
/*
"columnDefs": [ {
"targets": -1,
"data": null,
"defaultContent": "<button>Prodlog</button>"
} ]*/
} );
$('#example tbody').on( 'click', 'button', function () {
alert( "here" ); // This alert is triggered
var data = table.row( $(this).closest('tr') ).data();
alert( "got the data" ); //This alert is never reached
alert( data[0] +"'s salary is: "+ data[ 5 ] );
} );
} );
</script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
</table>
</body>
</html>
Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.