Get row data on button click in datatables

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?