WordPress中Tabulator初始化表格报Uncaught TypeError: Event is not a constructor

• 检查HTML表格结构合法性：你当前手动拼接的表头行直接放在<tbody>标签内，Tabulator解析现有HTML表格时要求表头必须放在<thead>标签中，结构不规范会导致解析失败。修改代码调整表格结构：

// 替换原清空表格的代码
jQuery("#usertable").html("");
jQuery("#usertable").html("<thead></thead><tbody class='usertable'></tbody>");
// 表头行拼接完成后插入到thead中，不要插入tbody
jQuery("#usertable thead").append(str_str);
// 数据行保持插入到tbody中即可

• 补全Tabulator初始化配置：初始化时不能传入空配置对象，即使是从现有HTML表格转换，也建议明确传入列配置，避免Tabulator自动解析列出错：

var table = new Tabulator("#usertable", {
    layout:"fitColumns",
    columns:[
        {title:"emp", field:"Ordered"},
        {title:"date", field:"Date", sorter:"date"},
        {title:"Payment", field:"Payment"},
        {title:"Vender", field:"Vender"},
        {title:"Approved", field:"Approved"},
    ],
});

• 避免Tabulator重复初始化：如果每次AJAX请求完成都会执行初始化逻辑，需要先判断是否已存在Tabulator实例，如有先销毁再重新初始化，避免重复绑定报错：

// 全局先声明实例变量
let poTable = null;
// 初始化前先销毁已有实例
if(poTable) {
    poTable.destroy();
}
poTable = new Tabulator("#usertable", {/* 配置项 */});

• 优化数据加载逻辑：可以省去手动拼接HTML表格的步骤，直接把AJAX返回的JSON数据传给Tabulator的data参数，既简化代码也避免HTML结构错误：

// 删除所有手动拼接<tr><td>的代码，直接初始化即可
var table = new Tabulator("#usertable", {
    height: 400,
    data: data, // 直接传入解析后的JSON数组
    layout:"fitColumns",
    columns:[
        {title:"emp", field:"Ordered"},
        {title:"date", field:"Date", sorter:"date"},
        {title:"Payment", field:"Payment"},
        {title:"Vender", field:"Vender"},
        {title:"Approved", field:"Approved"},
        {title:"OrderID", field:"OrderID", visible: false} // 不需要展示的字段可设置隐藏
    ],
});

• 检查依赖加载顺序：确认WordPress环境中Tabulator的CSS、JS文件已经在你的代码执行前完成加载，注册资源时要设置jQuery为依赖，避免出现找不到Tabulator构造函数的报错。

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