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

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 = $('#users_table').dataTable({...

通过

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

区别？具有大写"D"的数据.否则,你不能使用函数table.row()

从手册(https://datatables.net/manual/api)中,您可以看到:

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