销毁并重新加载后无法展开行;无法读取属性'_detailsShow'未定义的;

Unable to expand rows after destroy and reload; Cannot read property '_detailsShow' of undefined;

本文关键字：属性读取未定义 detailsShow 加载新加载更新时间：2024-05-12

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

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

jquery.dataTables.min.js:120未捕获类型错误：无法读取未定义的属性"_detailsShow"

我通过首先清除、销毁然后调用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

这对我很有用。只需通过add.off删除最新的点击事件处理程序，然后再添加新的。

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

问题是通过委托事件处理使用jQuery.on（）时，data_table对象没有得到"更新"。

试试这个：https://jsfiddle.net/f5mdcrup/4/

我所做的是在函数之外声明data_table。在这种情况下，范围会有所不同。

以下代码适用于我的

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