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>

Unfortunately no, but if you'd like, you can access my GitHub page: github.com/arthurmarkus2013/SampleWebsite — Arthur Markus
– Arthur Markus, Commented Aug 23, 2016 at 12:05

Kalu Singh Rao · Accepted Answer · 2016-08-23 14:01:14Z

2

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' );
} );
} );

edited Aug 23, 2016 at 14:01

answered Aug 23, 2016 at 13:32

Kalu Singh Rao

1,6971 gold badge16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Arthur Markus Over a year ago

You mean for "double click"? I've tried this, but unfortunately it's not working! Seems, like "click" is triggered way too early, eliminating "double click" from having any chance to be registered!

Kalu Singh Rao Over a year ago

Why not you use jQuery double click event here ?

davidkonrad · Accepted Answer · 2016-08-23 12:46:04Z

0

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.

answered Aug 23, 2016 at 12:46

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Comments

Yury Tarabanko · Accepted Answer · 2016-08-23 12:04:20Z

0

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

answered Aug 23, 2016 at 12:04

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

3 Comments

Arthur Markus Over a year ago

It doesn't work (I removed "this" keyword this week, for trying out without it)

Yury Tarabanko Over a year ago

Doesn't work how? Be more specific. And why did you remove this? What was the problem when using w/ it?

Arthur Markus Over a year ago

It keeps being undefined! I even tried hardcoding 0 in there, no effect!

Collectives™ on Stack Overflow

DataTables rows().data() not working

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related