jQuery DataTables - Child Rows and "Undefined is Not a Function"

Question

I'm working to add child rows to a data table and am getting a "TypeError: undefined is not a function" for a line of code that works perfectly on a different table and page. Any ideas?

HTML:

<div class="table-responsive">
    <h2 class="sub-header">Account Users&nbsp;<a href="?q=support"><span class="glyphicon glyphicon-question-sign"></span></a></h2>
    <table id="users_table" class="table table-striped embedded_table">
        <thead>
            <tr class="text-center">
                <th></th>
                <th>User Name</th>
                <th>Full Name</th>
                <th>User Type</th>
                <th>Assigned Device</th>
                <th>Date Added</th>
                <th>Action</th>
            </tr>
        </thead>
    </table>
</div>

Javascript/jQuery:

<script>
function format ( d ) {
    var html = '<table id="child_table" class="text-right" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Email Address:</td>'+
            '<td>'+ d.email_address +'</td>'+
            '<td>Time Zone:</td>'+
            '<td>'+ d.timezone +'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Create Date:</td>'+
            '<td>'+ d.create_date +'</td>'+
            '<td>Last Login:</td>'+
            '<td>'+ d.last_login +'</td>'+
        '</tr>'+
        '</table>';

    return html;
}

$(document).ready(function() {
    username = "<?php echo($_SESSION["username"]); ?>";
    userType = "<?php echo($_SESSION["user_type"]); ?>";

    var table = $('#users_table').dataTable({
        order: [1, 'asc'],
        "ajax": {
            "url": "/s/user_data.php",
            "dataSrc" : ""
        },
        "language": {
            "search": "Search:&nbsp;"
        },
        "columns": [
            {"data": null, "class": "details-control", "orderable": false, "defaultContent": "", "width": "2%"},
            {"data": "username", "name": "username", "width": "20%"},
            {"data": "fullName", "name": "fullName", "width": "20%"},
            {"data": "type", "name": "type", "width": "15%"},
            {"data": "cal_color", "name": "cal_color", "width": "15%"},
            {"data": "create_date", "type": "date", "name": "create_date", "visible": false},
            {"data": "time_zone", "name": "time_zone", "visible": false},
            {"data": "last_login", "type": "date", "name": "last_login", "visible": false},
            {"data": "email_address", "name": "email_address", "visible": false},
            {"data": "uid", "name": "uid", "visible": false}
        ]
    });

    // Add event listener for opening and closing details
    $('#users_table').find('tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var td = $(this).closest('td');
        var row = table.row(tr);

        console.log(tr);
        console.log(td);
        console.log(row);

        if(row.child.isShown())
        {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
            td.removeClass('shown');
        }
        else
        {
            // Open this row
            row.child(format(row.data())).show();
            tr.addClass('shown');
            td.addClass('shown');
        }
    });
});

The line of code that generates the error is as follows. It's under the comment "Add event listener for opening and closing details" in the bottom third of the script.

var row = table.row(tr);

Like I said, I'm using the same listener on another table and this line isn't an issue there. I've checked my punctuation multiple times and don't see any missing commas, semicolons, or quotes. You can see that I have 3 lines writing to the console log. Here's what I get if I comment out the offending line:

[tr.even, prevObject: n.fn.init[1], context: td.details-control, jquery: "1.11.0", constructor: function, selector: ""…]
[td.details-control, prevObject: n.fn.init[1], context: td.details-control, jquery: "1.11.0", constructor: function, selector: ""…]

I'm not a strong javascript or jQuery developer. All comments and suggestions are welcome.

Thanks.

Answer 1

I think you should replace

var table = $('#users_table').dataTable({...

by

var table = $('#users_table').DataTable({

The difference? Datable with a capital "D". Otherwise, you can't use the function table.row()

From the manual (https://datatables.net/manual/api), you can see:

It is important to note the difference between $( selector ).DataTable() and $( selector ).dataTable(). The former returns a DataTables API instance, while the latter returns a jQueryJS object. An api() method is added to the jQuery object so you can easily access the API, but the jQuery object can be useful for manipulating the table node, as you would with any other jQuery instance (such as using addClass(), etc.).