DataTables rows().data() not working

Question

I'm trying to get data from the first column of the selected row,
but instead I'm annoyingly keep getting "undefined"!
Here's my index page:

$(document).ready(function() {
        var mainDataTable = $("#mainDataTable").DataTable({
            "pagingType" : "full_numbers",
            "processing" : true,
            "serverSide" : true,
            "jQueryUI" : true,
            "ajax" : "/JsonData",
            "columns" : [
                { "data" : "caller" },
                { "data" : "event" },
                { "data" : "receiver" },
                { "data" : "timestamp" }
            ]
        });

        $("#mainDataTable tbody").on("dblclick", "tr", function () {
            var data = mainDataTable.row().data();
            $("#modalDialogBody").html(
                    '<table class="display jqueryAllCallsDataTable" id="allCalls"><thead><tr>' +
                    '<th>Timestamp</th><th>Talk Duration</th><th>Receiver</th><th>Type</th></tr>' +
                    '</thead><tbody><!-- Data will go here --></tbody></table>');

            $("#modalDialogTitle").text(data[0] + "#: All Calls");

            $("#allCalls").DataTable({
                "pagingType": "full_numbers",
                "processing": true,
                "serverSide": true,
                "jQueryUI": true,
                "ajax": {
                    "url": "/JsonData",
                    "data": function (d) {
                        d.orderByTimestampDesc = true;
                        d.callerId = data[0];
                    }
                },
                "searching": false,
                "ordering": false,
                "columns": [
                    {"data": "timestamp"},
                    {"data": "talkDuration"},
                    {"data": "receiver"},
                    {"data": "type"}
                ]
            });

            $("#modalDialog").modal();
        });

        $("#mainDataTable tbody").on("click", "tr", function() {
            var data = mainDataTable.row().data();
            $("#modalDialogBody").html(
                    '<table class="display jqueryCallDetailsDataTable" id="callDetails"><thead>' +
                    '<tr><th>Caller</th><th>Event</th><th>Receiver</th><th>Timestamp</th></tr>' +
                    '</thead><tbody><!-- Data will go here --></tbody></table>');

            $("#modalDialogTitle").text(data[0] + "#: Regular/Cancelled call");

            $("#callDetails").DataTable({
                "pagingType": "full_numbers",
                "processing": true,
                "serverSide": true,
                "jQueryUI": true,
                "ajax": {
                    "url": "/JsonData",
                    "data": function (d) {
                        d.callerId = data[0];
                    }
                },
                "searching": false,
                "ordering": false,
                "columns": [
                    {"data": "caller"},
                    {"data": "event"},
                    {"data": "receiver"},
                    {"data": "timestamp"}
                ]
            });

            $("#modalDialog").modal();
        });
    });

Can someone review this JavaScript and tell me, what I'm doing incorrectly?
By the way, if you care, modal dialog is done using Twitter Bootstrap.
These are my included scripts:

<script type="text/javascript" src="/js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/dataTables.jqueryui.min.css"/>
<script type="text/javascript" src="/js/dataTables.jqueryui.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="/css/bootstrap-theme.min.css"/>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>

Answer 1

Use this code. It is working fine here.

HTML Code

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
        <tbody>           
            <tr>
                <td>Charde Marshall</td>
                <td>Regional Director</td>
                <td>San Francisco</td>
                <td>36</td>
                <td>2008/10/16</td>
                <td>$470,600</td>
            </tr>
            <tr>
                <td>Haley Kennedy</td>
                <td>Senior Marketing Designer</td>
                <td>London</td>
                <td>43</td>
                <td>2012/12/18</td>
                <td>$313,500</td>
            </tr>
            <tr>
                <td>Tatyana Fitzpatrick</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>19</td>
                <td>2010/03/17</td>
                <td>$385,750</td>
            </tr>
            <tr>
                <td>Michael Silva</td>
                <td>Marketing Designer</td>
                <td>London</td>
                <td>66</td>
                <td>2012/11/27</td>
                <td>$198,500</td>
            </tr>           
        </tbody>
    </table>

Js Code

$(document).ready(function() {
var table = $('#example').DataTable();

$('#example tbody').on('dblclick', 'tr', function () {
    var data = table.row( this ).data();
    alert( 'You are Double clicked on '+data[0]+'\'s row' );
} );
} );

Answer 2

When you are using a JSON source data() will always return one or more object literals on the form

data = {
  "caller": "value",
  "event": "value",
  "receiver": "value",
  "timestamp": "value"
}

table.row().data() will return 1 such literal (the very first row) thus data[0] is undefined - data.caller however will contain the caller value from the row returned.

Answer 3

You need to specify which row you want by providing row selector.

When using inside row click handler you can simply use this.

var data = mainDataTable.row(this).data();