javascript jQuery DataTables - 子行和“未定义不是函数”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24107586/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery DataTables - Child Rows and "Undefined is Not a Function"
提问by SteveSTL
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?
我正在努力将子行添加到数据表中，但对于在不同表和页面上完美运行的一行代码，我收到了“TypeError: undefined is not a function”。有任何想法吗？
HTML:
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:
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 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:
就像我说的，我在另一张桌子上使用同一个监听器，这条线在那里不是问题。我已经多次检查我的标点符号，但没有发现任何遗漏的逗号、分号或引号。您可以看到我有 3 行写入控制台日志。如果我注释掉违规行，我会得到以下结果：
[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.
我不是一个强大的 javascript 或 jQuery 开发人员。欢迎所有意见和建议。
Thanks.
谢谢。
回答by Jean-Pierre Delacre
I think you should replace
我认为你应该更换
var table = $('#users_table').dataTable({...
var table = $('#users_table').dataTable({...
by
经过
var table = $('#users_table').DataTable({
var table = $('#users_table').DataTable({
The difference? Datable with a capital "D". Otherwise, you can't use the function table.row()
区别？数据表带有大写字母“D”。否则，你不能使用函数 table.row()
From the manual (https://datatables.net/manual/api), you can see:
从手册（https://datatables.net/manual/api）中，您可以看到：
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.).
重要的是要注意 $( selector ).DataTable() 和 $( selector ).dataTable() 之间的区别。前者返回一个 DataTables API 实例，而后者返回一个 jQueryJS 对象。将 api() 方法添加到 jQuery 对象，以便您可以轻松访问 API，但 jQuery 对象可用于操作表节点，就像您对任何其他 jQuery 实例（例如使用 addClass() 等）一样。 ）。
