数据表行（）。数据（）不工作

Question

我正在尝试从所选行的第一列获取数据，
但相反，我烦人地不断得到“未定义”！
这是我的索引页：

$(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();
        });
    });

有人可以查看这个 JavaScript 并告诉我，我做错了什么吗？
顺便说一句，如果您关心，模态对话框是使用 Twitter Bootstrap 完成的。
这些是我包含的脚本：

<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

使用此代码。它工作正常here。

HTML 代码

<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 代码

$(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

当您使用 JSON 源时，data() 将始终在表单上返回一个或多个对象字面量

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

table.row().data() 将返回 1 个这样的文字（第一行），因此 data[0] 未定义 - data.caller 但将包含返回行中的 caller 值。

Answer 3

您需要通过提供row selector 来指定您想要的行。

当使用行内点击处理程序时，您可以简单地使用this。

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