Jquery Datatable - selector throws table/row undefined

I´ve searched for a solution but I didn´t clearly understand the reason why its not working. Could you please help me ?

This is my code, it throws a Table undefined error, when I change var data = window.table.row($(this)).data() , to var data = window.table.row($(this)).data() , the error changes to

0x800a138f - JavaScript runtime error: Unable to get property 'row' of undefined or null reference

<hr />
<div class="row">
    <div class="col-xs-12">
        <table class="table table-striped table-bordered nowrap" id="calculation-table">
            <thead>
                <tr>
                    <td>Beneficial Owner</td>
                    <td>Account</td>
                    <td>Country</td>
                    <td>Currency</td>
                    <td>Year</td>
                    <td>Updater</td>
                    <td>Updated</td>
                    <td>Output</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Beneficial Owner</th>
                    <th>Account</th>
                    <th>Country</th>
                    <th>Currency</th>
                    <th>Year</th>
                    <th>Updater</th>
                    <th>Updated</th>
                    <th>Output</th>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        //Calculation.init();
        $('#calculation-table').DataTable(
            { // set server side processing to true
                bServerSide: true,
                // set controller responsible for sorting and paging
                sAjaxSource: "CalculationTest/AjaxHandler",
                // show processing is happening while getting data
                bProcessing: true,
                sPaginationType: 'full_numbers',
                iDisplayLength: 15,
                lengthMenu: [[15, 25, 50, -1], [15, 25, 50, "All"]],
                columns: [
                    { data: "BeneficialOwner" },
                    { data: "Account" },
                    { data: "Country" },
                    { data: "Currency" },
                    { data: "Year" },
                    { data: "Updater" },
                    { data: "Updated".toString() },
                    {
                        "targets": -1,
                        "data": null,
                        "defaultContent": "<button class='btn btn-primary'>Download File</button>"
                    }
                ],
                "language": {
                    "search": "",
                    "searchPlaceholder": "Search..."
                }
            });

        $('#calculation-table > tbody').on('click', 'button', function () {
            var data = table.row($(this)).data();
            var url = '/Calculation/DownloadCalculation';
            $.ajax({
                type: "GET",
                url: url,
                data: { id: data[5] },
                dataType: "html",
                success: function (data) {
                    //put your code here
                }
            });
        });

    });
</script>

<td> is for <tbody>
<th> is for <thead>

You have exchanged in your html