DataTable v1.10.4 ajax with columnDefs which lead to row($(this)).data() undefined data

Hello People

I having difficulties getting data from row($(this)).data() which gave me undefined data.

Here my source code:

HTML:

<table id="table123" width="100%" cellspacing="0" cellpadding="0" class="default_table selectable_table">
                    <thead>
                        <tr>
                            <th rowspan="2"><img src="/img/table_arrow.png" alt=""></th>
                            <th rowspan="2">PACKAGE ID</th>
                            <th colspan="4"> Formula</th>
                            <th rowspan="2">Action</th>
                        </tr>
                        <tr>

                            <th>SLOT ID</th>
                            <th>MODULE ID</th>
                            <th>PACKAGE TITLE</th>
                            <th>PACKAGE STATUS</th>
                        </tr>
                    </thead>

                    <tfoot>
                        <tr>
                            <th rowspan="2"><img src="/img/table_arrow_flipped.png" alt=""></th>
                            <th rowspan="2">PACKAGE ID</th>
                            <th colspan="4">Formula</th>
                            <th rowspan="2">Action</th>
                        </tr>
                        <tr>
                            <th>SLOT ID</th>
                            <th>MODULE ID</th>
                            <th>PACKAGE TITLE</th>
                            <th>PACKAGE STATUS</th>
                        </tr>
                    </tfoot>
                </table>

Javascript:

$(document).ready(function () {

       var table = $("#table123").DataTable ({
            "pagingType": "full_numbers",
            "processing": true,
            "serverSide": true,
            "ajax": "/server_processing.php",
            "columnDefs": [
                {"className": "center", "targets": [0], "data": null, "searchable": false, "render": function (data, type, full, meta) {
                        return '<input type="checkbox" name="checkbox" class="select"/>';
                    }
                },
                {"targets": [1], "data": "PACKAGE_ID"},
                {"targets": [2], "data": "SLOT_ID"},
                {"targets": [3], "data": "MODULE_ID"},
                {"targets": [4], "data": "PACKAGE_TITLE"},
                {"targets": [5], "data": "PACKAGE_STATUS"},
                {"className": "center", "targets": [7], "data": null, "searchable": false, "render": function (data, type, full, meta) {
                        return '<a class="btn">Export</a>';
                    }
                }
            ]
        });

        $("#table123 > tbody").on( "click", "tr", function () {

               var data = table.row($(this)).data();


               alert("Data: " + data[1] + " " + data[2] + " " + data[3]);

        } );

       $("#table123 > tbody").on("click", "tr > td > a.btn:contains('Export')", function () {

                       var data = table.row($(this).parents("tr")).data();

                        alert("Data: " + " " + data[1] + " " + data[2] + " " + data[3]);


                });



  });

When I click on the row it would not pop up the alert message

and when I click on the "Export" button, it pop up the alert message and said:

Data: undefined undefined undefined

Anyone mind lend a helping hand?

Thanks

:)