​

 function myDetail(id) {

   console.log(id);

​

  }

​

$(document).ready(function() {

​

​

  function format ( rowData, id ) {

    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +

    '<tr>' +   

'<td>' +

'<button type="submit" class="btn btn-outline-primary" onclick="myDetail(' + id +')" id="detailBtn" >Detail</button>' +

'</td>' +

'</table>';

}

​

  var table = $('#example').DataTable( {

    ajax: '/ajax/objects.txt',

    columns: [

        {

            className:      '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 );

        var id = row.index();

​

        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(), id)

            ).show();

            tr.addClass('shown');

        }

    } );

} );