Question

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

这里是数据源：

<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"}]

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

Answer 1

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

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

不完全确定它为什么被添加（我接管一个旧的代码库），但我看到一个javascript警告，说“selectpicker不是一个功能”，并决定评论该块，而VOILA我能够创建数据表并对其进行操作。现在我希望它不会以某种方式影响另一个页面......

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

1 个答案: