Fatal编程技术网
  • javascript/
  • Javascript 销毁并重新加载后无法展开行；无法读取属性'_细节展示'；未定义的；

Javascript 销毁并重新加载后无法展开行；无法读取属性'_细节展示'；未定义的；

javascript jquery

Javascript 销毁并重新加载后无法展开行；无法读取属性'_细节展示'；未定义的；,javascript,jquery,datatable,Javascript,Jquery,Datatable,我正在使用jQuery创建网页。我有一个用例，页面打开时已经填充了表。现在，页面中有一个表单，他可以在其中放置一些过滤器并刷新表。此外，更重要的是，对于每一行，我可以展开以查看更多详细信息 在我的例子中，一旦表单提交后重新加载数据，将展开每个数据行的details按钮就会停止工作。它给出了以下错误： jquery.dataTables.min.js:120未捕获类型错误：无法读取未定义的属性“\u detailsShow” 我通过首先清除、销毁然后调用DataTable方法来重新加载这个表。这是

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

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

jquery.dataTables.min.js:120未捕获类型错误：无法读取未定义的属性“\u 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>


标题
$（文件）。准备好了吗(
函数（）
{
var dashboard_table_id=“#示例”；
函数销毁现有数据表（）
{
var existing_table=$（仪表板_table_id）.dataTable（）；
if（现有_表！=未定义）
{
现有的_table.fnClearTable（）；
现有_table.fndostroy（）；
}
}
函数create_dashboard_table（）
{
var data\u table=$（仪表板\u table\u id）.DataTable({
“数据”：[{
“德图·罗维德”：10，
“专栏1”：“delhivery”，
“第二栏”：“CRP12345”，
“第三栏”：“1122”，
“第4列”：“一个扩展行”
}, {
“德图·罗维德”：2，
“专栏1”：“delhivery”，
“第二栏”：“CRP12345”，
“第三栏”：“1122”，
“第4列”：“其他扩展行”
}],
“栏目”：[
{“className”：“select checkbox”，orderable:false，“data:null”，defaultContent:“}，
{“class”：“details control”，“orderable”：false，“data”：null，“defaultContent”：“}，
{“数据”：“第1列”}，
{“数据”：“第2列”}，
{“数据”：“第3列”}
],
“按钮”：{}，
“dom”：“lBfrtip”，
“选择”：{
“风格”：“多”，
“选择器”：“td:第一个孩子”
},
“语言”：{“搜索”：“”}，
“订单”：[[2，‘asc']]，
“bLengthChange”：false，
“页面长度”：25
});
//为打开和关闭详细信息添加事件侦听器
$（仪表板表格id）。查找（'tbody'）。在（'click'，'tr td.details control'，上，
函数（）
{
var tableRow=$（this.closest（'tr'）；
var row=数据\表格行（表格行）；
if（row.child.isShown（））
{
tableRow.removeClass（“详细信息”）；
row.child.hide（）；
}
其他的
{
var rowData=row.data（）；
tableRow.addClass（“详细信息”）；
row.child（“您好，这是我指的扩展视图…”）。show（）；
}
});
}
$（“#示例表单提交”）。单击（函数（事件）
{
event.preventDefault（）；
销毁现有的数据表（）；
创建仪表板表格（）；
});
创建仪表板表格（）；
});
td.1电子控制{
背景：绿色；
光标：指针；
}
tr.details td.details-control{
背景：蓝色；
}
刷新并尝试展开
专栏1
专栏2
第3栏
有人能指出我做错了什么吗。非常感谢。这已经困扰我一段时间了

：Credits:@Edis Golubich

问题在于，在通过委托事件处理使用jQuery.on（）时，
数据表
对象没有得到“更新”

试试这个：

我所做的是在函数外部声明
data\u table
。在这种情况下，作用域会有所不同。

问题是在通过委托事件处理使用jQuery.on（）时，
数据表
对象没有得到“更新”

试试这个：

我所做的是在函数外部声明
data\u table
。在这种情况下，范围会有所不同。

它适合我。在添加新的click事件处理程序之前，只需通过add.off删除最新的click事件处理程序

$(dashboard_table_id).find('tbody').off('click', 'tr td.details-control'); 
$(dashboard_table_id).find('tbody').on('click', 'tr td.details-control',function(){...});
它对我有用。只需在ad之前通过add.off删除最新的click事件处理程序 
$(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
});