jQuery数据表 - 子行和“未定义不是函数” [英] jQuery DataTables - Child Rows and "Undefined is Not a Function"
问题描述
HTML：
< div class =表响应>
< h2 class =sub-header>帐户用户& nbsp;< a href =？q = support>< span class =glyphicon glyphicon-question-sign>< ; / span>< / a>< / h2>
< table id =users_tableclass =table table-striped embedded_table>
< thead>
< tr class =text-center>
< th>< / th>
< th>用户名< / th>
< th>全名< / th>
< th>用户类型< / th>
< th>被分配的设备< / th>
< th>添加日期< / th>
<动作< / th>
< / tr>
< / thead>
< / table>
< / div>
Javascript / jQuery：
< script>
函数格式（d）{
var html ='< table id =child_tableclass =text-rightcellpadding =5cellspacing =0border =0style = padding-left：50px;>'+
'< tr>'+
'< td>电子邮件地址：< / td>'+
'< td& ;'+ d.email_address +'< / td>'+
'< td>时区：< / td>'+
'< td>'+ d.timezone + < / td>'+
'< / tr>'+
'< tr>'+
'< td>创建日期：< / td>'+
'< td>'+ d.create_date +'< / td>'+
'< td>上次登录：< / 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用户名，名称：用户名，宽度：20％}，
{data：fullName，name：fullName，width }，
{data：type，name：type，width：15％}，
{data：cal_color，name cal_color，width：15％}，
{data：create_date，type：date，name：create_dat e，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 }，
{data：uid，name：uid，visible：false}
]
}）;
//添加事件侦听器以打开和关闭详细信息
$（'＃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（））
{
//这行已经打开 - 关闭它
row.child.hide（）;
tr.removeClass （'shown'）;
td.removeClass（'shown'）;
}
else
{
//打开此行
row.child （format（row.data（）））show（）;
tr.addClass（'shown'）;
td.addClass（'shown'）;
}
}）;
}）;
生成的代码行错误如下。脚本底部有添加事件监听器以打开和关闭详细信息。
var row = table .row（tr）;
像我说的，我在另一个表上使用相同的监听器，这行不是在那里发问。我已经检查了我的标点符号多次，没有看到任何逗号，分号或引号。你可以看到我有3行写入控制台日志。如果我评论出违规行，我可以得到如下信息：
[tr.even，prevObject：n.fn.init [1 ]，上下文：td.details-control，jquery：1.11.0，构造函数：function，selector：...]
[td.details-control，prevObject：n.fn.init [1]上下文：td.details-control，jquery：1.11.0，构造函数：function，selector：...]
我不是一个强大的javascript或jQuery开发人员。所有意见和建议是受欢迎的。
谢谢。
认为您应该替换
var table = $（'＃users_table'）。dataTable（{...
by
var table = $（'＃users_table'）。数据表（{
区别？Datable与大写D否则不能使用函数table.row ）
从手册（ https://datatables.net） / manual / api ），您可以看到：
请注意$（selector）.DataTable之间的区别很重要（）和$（selector）.dataTable（），前者返回一个DataTables API实例，后者返回一个jQueryJS对象，将一个api（）方法添加到jQuery对象中，以便您可以轻松访问该API，但是jQuery对象可以用于操纵在表节点上，像任何其他jQuery实例（如使用addClass（）等）一样）。
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 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.
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.).
这篇关于jQuery数据表 - 子行和“未定义不是函数”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
