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 <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: "
},
"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 ment "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 mas, semicolons, or quotes. You can see that I have 3 lines writing to the console log. Here's what I get if I ment 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 ments and suggestions are wele.
Thanks.
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 <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: "
},
"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 ment "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 mas, semicolons, or quotes. You can see that I have 3 lines writing to the console log. Here's what I get if I ment 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 ments and suggestions are wele.
Thanks.
Share Improve this question edited Jun 8, 2014 at 19:08 Rashmin Javiya 5,2223 gold badges30 silver badges49 bronze badges asked Jun 8, 2014 at 15:17 SteveSTLSteveSTL 9983 gold badges13 silver badges21 bronze badges1 Answer
Reset to default 15I 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/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.).