javascript - 销毁和重新加载后无法扩展行；无法读取未定义的属性 '

javascript - 销毁和重新加载后无法扩展行；无法读取未定义的属性 '_detailsShow'；

转载作者：行者123 更新时间：2023-11-30 08:31:53

我正在使用 jQuery DataTable用于创建网页。我有一个用例，其中页面打开时表格已经填充。现在，页面中有一个表单，他可以在其中放置一些过滤器并刷新表格。此外，更重要的是，对于每一行，我可以展开以查看更多详细信息，如 explained here .

在我的例子中，一旦在提交表单后重新加载数据，将展开每个数据行的详细信息按钮就会停止工作。它给出了以下错误:

jquery.dataTables.min.js:120 Uncaught TypeError: Cannot read property '_detailsShow' of undefined

我通过先清除、销毁然后调用 DataTable 方法来重新加载表。这是我的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../../../static/css/chosen/bootstrap-chosen.css">

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../../static/js/bootstrap/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js"></script>

    <script type="text/javascript">

        $(document).ready(
                function ()
                {
                    var dashboard_table_id = "#example";

                    function destroy_existing_data_table()
                    {
                        var existing_table = $(dashboard_table_id).dataTable();
                        if (existing_table != undefined)
                        {
                            existing_table.fnClearTable();
                            existing_table.fnDestroy();
                        }
                    }

                    function create_dashboard_table()
                    {
                        var data_table = $(dashboard_table_id).DataTable({
                            "data": [{
                                "dt_RowId": 10,
                                "column1": "delhivery",
                                "column2": "CRP12345",
                                "column3": "1122",
                                "column4": "One expanded row"
                            }, {
                                "dt_RowId": 2,
                                "column1": "delhivery",
                                "column2": "CRP12345",
                                "column3": "1122",
                                "column4": "Other expanded row"
                            }],
                            "columns": [
                                {"className": "select-checkbox", orderable: false, "data": null, "defaultContent": ""},
                                {"class": "details-control", "orderable": false, "data": null, "defaultContent": ""},
                                {"data": "column1"},
                                {"data": "column2"},
                                {"data": "column3"}
                            ],
                            "buttons": {},
                            "dom": 'lBfrtip',
                            "select": {
                                "style": 'multi',
                                "selector": 'td:first-child'
                            },
                            "oLanguage": {"sSearch": ""},
                            "order": [[2, 'asc']],
                            "bLengthChange": false,
                            "pageLength": 25
                        });

                        // adding event listener for opening and closing details
                        $(dashboard_table_id).find('tbody').on('click', 'tr td.details-control',
                                function ()
                                {
                                    var tableRow = $(this).closest('tr');
                                    var row = data_table.row(tableRow);

                                    if (row.child.isShown())
                                    {
                                        tableRow.removeClass('details');
                                        row.child.hide();
                                    }
                                    else
                                    {
                                        var rowData = row.data();
                                        tableRow.addClass('details');
                                        row.child("Hello there, this is the expanded view I am referring to....").show();
                                    }
                                });
                    }

                    $("#example-form-submit").click(function (event)
                    {
                        event.preventDefault();
                        destroy_existing_data_table();
                        create_dashboard_table();
                    });

                    create_dashboard_table();
                });

    </script>
    <style>td.details-control {
        background: green;
        cursor: pointer;
    }

    tr.details td.details-control {
        background: blue;
    }</style>
</head>
<body>
<div class="main-content lfloat">
    <div class="container" style="width: 100%;">

        <label for="example-form-submit" class="col-md-2 control-label"></label>
        <div class="col-md-2">
            <button type="submit" id="example-form-submit" class="btn btn-primary">Refresh and try to expand</button>
        </div>

        <div>
            <table id="example" class="row-border hover order-column" cellspacing="0" width="100%">
                <thead>
                <tr>
                    <th></th>
                    <th></th>
                    <th>column1</th>
                    <th>column2</th>
                    <th>column3</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
</body>

</html>

有人可以指出我做错了什么吗？提前致谢。这已经困扰我一段时间了。

JSFiddle :学分:@Edis Golubich

最佳答案

它对我有用。只需在添加新事件处理程序之前通过添加 .off 删除最新的点击事件处理程序。

$(dashboard_table_id).find('tbody').off('click', 'tr td.details-control'); 
$(dashboard_table_id).find('tbody').on('click', 'tr td.details-control',function(){...});

关于javascript - 销毁和重新加载后无法扩展行；无法读取未定义的属性 '_detailsShow'；，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36579470/

文章推荐： javascript - 从数组 Javascript 中拼接对象

文章推荐： javascript - 如何修复 JavaScript 中的开放重定向安全漏洞？

文章推荐： javascript - 使函数中需要参数

文章推荐： javascript - grunt-babel 挂起并且不返回错误消息

javascript - 销毁和重新加载后无法扩展行；无法读取未定义的属性 '_detailsShow'；
我正在使用 jQuery DataTable用于创建网页。我有一个用例，其中页面打开时表格已经填充。现在，页面中有一个表单，他可以在其中放置一些过滤器并刷新表格。此外，更重要的是，对于每一行，我可以展

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 销毁和重新加载后无法扩展行；无法读取未定义的属性 '_detailsShow'；