Question

我正在努力将子行添加到数据表中，并且对于在不同的表和页面上完美运行的代码行，我得到“TypeError：undefined不是函数”。有什么想法吗？

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

生成错误的代码行如下。它位于脚本底部三分之一的“添加事件监听器以打开和关闭详细信息”下。

var row = table.row(tr);

就像我说的那样，我在另一张桌子上使用相同的监听器，这一行不是问题。我已经多次检查了我的标点符号，并且没有看到任何丢失的逗号，分号或引号。您可以看到我有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: ""…]

我不是一个强大的javascript或jQuery开发人员。欢迎提出所有意见和建议。

感谢。

Answer 1

我认为你应该替换

var table = $（＆＃39;＃users_table＆＃39;）。dataTable（{...

通过

var table = $（＆＃39;＃users_table＆＃39;）。DataTable（{

区别？具有大写数据的数据＆＃34; D＆＃34;。否则，您无法使用函数table.row（）

从手册（https://datatables.net/manual/api）中，您可以看到：

重要的是要注意$（selector）.DataTable（）和$（selector）.dataTable（）之间的区别。前者返回DataTables API实例，后者返回jQueryJS对象。将一个api（）方法添加到jQuery对象中，以便您可以轻松访问API，但jQuery对象可用于操作表节点，就像使用任何其他jQuery实例一样（例如使用addClass（）等。）。

jQuery DataTables - 子行和“未定义不是函数”

1 个答案: