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

2023-12-07

我正在努力将子行添加到数据表中,但对于在不同表和页面上完美运行的一行代码,出现“类型错误:未定义不是函数”。有任何想法吗?

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 开发人员。欢迎所有意见和建议。

Thanks.


我认为你应该更换

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

by

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

区别?数据以大写“D”表示。否则,无法使用函数 table.row()

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery DataTables - 子行和“未定义不是函数” 的相关文章

随机推荐