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

Question

我遇到了 DataTable 问题，它似乎已成功创建，因为发生了“fnDrawCallback”(并且表成功显示)，但是直接跟随表创建的警报并未执行。然后在onClick之后，当访问数据表的变量时，它仍然是“null”(与最初设置的一样)。因为它是 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 停止执行更多代码，数据表有一个“错误函数”，如果有错误，它应该处理错误，我不这样做在控制台中看不到任何错误，表格显示正常，页面源 html 看起来正常，没有任何红色，但后面的警报不执行。我不确定还可以尝试什么？提前致谢。

Answer 1

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

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

不太清楚为什么添加它(我正在接管一个旧的代码库)，但我看到一个 javascript 警报，上面写着“selectpicker 不是一个函数”，并决定注释掉该 block ，瞧，我能够创建数据表并对其进行操作。现在我希望它不会以某种方式影响另一个页面上的某些内容......