DataTables 使用 data 配置项加载本地静态数据时事件不生效问题咨询

问题原因 #

DataTables 使用本地静态data配置初始化时是同步渲染流程：表格初始化、首次渲染的全过程会在DataTable()方法执行时同步完成，而你当前的写法是在DataTable()初始化执行结束后才通过链式调用绑定preDraw、draw.dt事件，此时初始化阶段的相关事件已经触发完毕，后续绑定的监听器自然捕获不到之前的事件通知。
而使用ajax配置时是异步渲染流程：DataTable()初始化执行完成时，ajax请求还未返回，首次渲染会等到请求返回后才触发，此时你在初始化后绑定的事件监听器已经生效，所以可以正常捕获事件。后续按钮点击重绘时事件已经绑定完成，自然也能正常触发。 #

解决方案 #

有两种通用解决方式可以覆盖同步、异步两种加载场景的事件监听：

方案1：先绑定事件，再初始化DataTables #

在调用DataTable()初始化方法之前，先给表格DOM节点绑定对应的DT事件，确保初始化阶段触发的事件可以被监听器捕获：

$(document).ready(function(){
    "use strict";
    const ta_data = JSON.parse(ta).data;
    
    // 第一步：先绑定事件
    $("#datatable-archive")
      .on( 'preDraw.dt', function() {sp = {buy:0, sell:0, buyErr:0, sellErr:0};})
      .on( 'draw.dt', function() {
            $.when(offSpinner()).then(
                function(){
                    gageMaker(sp, "Accuracy");
                    commonDonut();
                }
            )
    });
    
    // 第二步：再初始化表格
    let table_arch = $("#datatable-archive").DataTable({
            "scrollY": '60vh',
            "scrollX": false,
            "paging": false,
            "searching": false,
            "info": false,
            "order": [[ 10, "desc" ]],
            "data": ta_data
    });
});

方案2：直接在DataTables配置项中声明回调 #

使用DataTables内置的回调配置项，将逻辑直接写在初始化参数中，无需额外绑定事件：

$(document).ready(function(){
    "use strict";
    const ta_data = JSON.parse(ta).data;
    
    let table_arch = $("#datatable-archive").DataTable({
            "scrollY": '60vh',
            "scrollX": false,
            "paging": false,
            "searching": false,
            "info": false,
            "order": [[ 10, "desc" ]],
            "data": ta_data,
            // 对应preDraw事件
            "preDrawCallback": function() {
                sp = {buy:0, sell:0, buyErr:0, sellErr:0};
            },
            // 对应draw.dt事件
            "drawCallback": function() {
                $.when(offSpinner()).then(
                    function(){
                        gageMaker(sp, "Accuracy");
                        commonDonut();
                    }
                )
            }
    });
});

效果验证 #

如果要验证上述原因的正确性，可以保持你原有写法不变，在初始化完成后手动调用一次重绘方法，此时绑定的事件就会正常触发：

table_arch.draw();

内容的提问来源于stack exchange，提问作者koa73