DataTable 导致 javascript 停止执行 - 控制台中没有错误答案

【问题标题】：DataTable causes javascript to stop executing - no errors in consoleDataTable 导致 javascript 停止执行 - 控制台中没有错误
【发布时间】：2016-12-13 21:34:08
【问题描述】：

我遇到了 DataTable 的问题，它似乎已成功创建，因为发生了“fnDrawCallback”（并且表显示成功），但是直接在表创建之后的警报不会执行。然后再onClick，当访问数据表的变量时，它仍然是“null”（如最初设置的那样）。因为它为空，所以我无法访问复选框值和 javascript 错误（“无法读取 null 的属性 'fnGetNodes'”）。

这里是数据表来源：

<script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.10.5/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.10.5/css/jquery.dataTables.css">

此按钮激活文档准备功能中的点击功能：

<a href="javascript:void(0);" id="blast" class="btn btn-lg btn-success">Send selected cranes in an Email Blast</a>

...这将为带有复选框的表格创建标题...

<table class="table" id="active_cranes_id" data-type="crane">
    <thead>
        <tr><th class="nosort actions">Select</th><th>Make</th><th>Model</th><th>Unit</th><th>Hits</th></tr>
    </thead>

... 然后插入这个 javascript 来显示表格，并处理 onclick ...

<script type="text/javascript">
    alert("script is executing");//this hits on page load
    active_cranes_table = null;
    $(document).ready(function(){
        alert('defining blast-onClick function');//this hits
        $("#blast").click(function() {
            $("#blast").attr("disabled", "disabled");
            var equipments_selected = new Array();
            alert("active_cranes_table: "+active_cranes_table);//active_cranes_table=null ... next line blows up...
            $(active_cranes_table.fnGetNodes()).find("input[type='checkbox']:checked").each( function(index) {
                alert('index: '+index);
                equipments_selected.push($(this).closest('tr').attr('id'));
            });
            $("#blast").removeAttr("disabled"); 
            //doesn't hit, error was thrown above because datatable was null
            alert('leaving blast-click function');
        });

        //this executes after the page has rendered and creates the table (unsuccessfully?)
        $.fn.dataTable.ext.errMode = 'alert';//i've tried using "none" as well
        active_cranes_table = $('#active_cranes_id')
            .on('error.dt', function (e, settings, techNote, message) {
                console.log('DataTable error: ', message);
            })
            .dataTable({
                "fnDrawCallback": function(){alert('table finished drawing');},//this gets hit
                "aaData": <?php echo $active_cranes_json;?>,
                "bStateSave": true,
                "sDom": '<"top"plf>rt<"bottom"p>',
                "bSortClasses":false,
                "asStripeClasses": [],
                "aoColumnDefs": [
                    //{ "sClass": "test", "aTargets": [ "actions" ] },
                    {"bSortable": false, "aTargets": [ "nosort" ] }
                ]
            });//THIS IS WHERE EVERYTHING STOPS, and the following alerts don't execute...
        alert("datatable created");//DOESNT GET HIT
        alert("datatable var: "+active_cranes_table);//DOESNT GET HIT
    });
    alert('outside document-ready-function');//this hits before anything in document-ready-function
</script>

这是输入的json：

[{"DT_RowId":"218686","DT_RowClass":"alert-success","0":"<input type=\"checkbox\" checked> Select","1":"Grove","2":"GMK6300L","3":null,"4":"101"}]

所以基本问题 - 在创建数据表时，发生了一些导致 javascript 停止执行更多代码的事情，数据表有一个“on-error-function”，如果有错误，它应该处理错误，我没有在控制台中看不到任何错误，表格显示正常，页面源 html 看起来很好，没有任何红色，但随后的警报不执行。我不确定还有什么可以尝试的？提前致谢。

【问题讨论】：

你能在爆炸的那一行之前写一个console.log(active_cranes_table.fnGetNodes())吗？
devlin - 它表示此时它为空。这是问题的症状，即 .datatable 不会将控制权返回给 javascript，并且后续警报永远不会触发...
如果我在数据表定义中破坏表 ID，它会成功创建一个空数据表，并且后续警报会正常触发。可能与我定义表格元素的方式有关吗？
尝试消除过程，删除数据表定义中的各种设置，以便尽可能接近基本定义。我不知道这是否相关，但您也可以考虑从旧语法切换。
感谢 devlin，我不知道有新语法，我最近才使用这个旧代码库，我会看看更新它，谢谢！

标签： javascript jquery html datatable

【解决方案1】：

我找到了罪魁祸首，就是这个块被添加到其他地方的 javascript 文件中：

$(document).on("draw.dt", ".dataTable", function () {
    $('.selectpicker').selectpicker('render');
});

不确定为什么要添加它（我正在接管旧代码库），但我看到一个 javascript 警报，上面写着“selectpicker 不是函数”并决定注释掉这个块，瞧，我能够创建数据表并对其采取行动。现在我希望它不会以某种方式影响另一个页面上的东西......

【讨论】：