Jquery DataTable行级删除按钮配置 解决$.fn.dataTable.Editor报错

• 控制台抛出的$.fn.dataTable.Editor is not a constructor报错，本质是代码中残留了DataTables官方付费Editor组件的初始化逻辑（一般是new $.fn.dataTable.Editor({...})这类代码）。Editor是独立付费组件，没有授权、没有引入对应资源的前提下，全局根本不存在这个构造器，自然会报错。如果你的行编辑是基于轻量插件实现的，直接删掉这段冗余的Editor初始化代码即可解决报错，不需要额外引入付费资源。
• 你当前的表格配置存在3处硬逻辑错误，直接导致删除按钮无法正常展示、交互失效：
  1. 列数与表头不匹配：你的表头一共定义了5个列（S.No、Status、User Login、User Name、Delete），对应列索引为0-4，但初始的columns配置只定义了4个字段，且把删除按钮的渲染规则错绑到了targets:0（也就是S.No序号列），同时错误把本该展示的User Name列（索引3）设置为隐藏，完全和需求错位
  2. 序号渲染逻辑重复冲突：columns中已经实现了跨分页的正确序号渲染，同时又在fnRowCallback里重复给第一列赋值，会导致渲染值互相覆盖、出现闪烁
  3. 动态DOM的事件绑定失效：DataTable的表格行是动态渲染的，直接给删除按钮绑点击事件会因为DOM没提前生成失效，必须用事件委托的方式绑定

第一步：修正表格配置逻辑 #

调整列定义、渲染规则，让配置和表头一一对应，删除冗余代码：

function LoadTableData() {
    var params = {
        UserName: $('#txtUserName').val(), 
        UserID: $('#txtUserID').val(),
        Status: $('input[name="Status"]:checked').val()
    };
    $.ajax({
        url: 'UserService.asmx/Get_Data_MobileUser',
        method: 'post',
        data: JSON.stringify(params),
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (data) {
            $('#example').dataTable({
                destroy: true,
                data: data,
                // 补全5列定义，和表头顺序完全对齐
                columns: [
                    // 列0：S.No 序号列
                    {
                        render: function (data, type, row, meta) {
                            // 跨分页的连续序号计算
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    // 列1：Status
                    { 'data': 'Status', class: 'editable text' },
                    // 列2：User Login
                    { 'data': 'USER_LOGIN', class: 'editable text' },
                    // 列3：User Name
                    { 'data': 'USER_NAME', class: 'editable text' },
                    // 列4：Delete 操作列
                    {
                        render: function (data, type, row) {
                            // 把用户唯一标识存在按钮的自定义属性上，方便后续删除接口传参
                            return '<button type="button" class="btn-delete" data-userid="' + row.USER_ID + '">Delete</button>';
                        }
                    }
                ],
                columnDefs: [
                    // 如果需要隐藏非展示的原始字段，比如后端返回的主键字段，再在这里配置对应索引的visible:false即可
                    // 示例：如果后端返回的第6列是用户标识不需要展示，就加 { "visible": false, "targets": [5] }
                ],
                dom: 'Bfrtip',
                select: true,
                buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
                searching: true,
                paging: true,
                info: true,
                language: {
                    "emptyTable": "No data available"
                }
                // 删掉原来重复的fnRowCallback序号逻辑，避免和columns里的渲染冲突
            })
        },
        error: function (err) {
            console.log(err.responseText);
        }
    });

    // 事件委托绑定删除按钮点击，解决动态DOM绑定失效问题
    // 提前off避免重复绑定，防止多次调用LoadTableData后一次点击触发多次请求
    $('#example').off('click', '.btn-delete').on('click', '.btn-delete', function () {
        const userId = $(this).data('userid');
        // 这里对接你原来的删除模态框逻辑/删除接口调用即可
        // 调删除接口成功后，重新执行LoadTableData刷新表格数据
    });
};

第二步：排查Editor报错来源 #

全局搜索项目代码，找到所有直接引用$.fn.dataTable.Editor的代码段：

• 如果是之前参考示例写的行编辑逻辑，但实际你是用轻量行内编辑插件实现的行点击编辑，直接把这段Editor初始化代码删掉即可，不需要额外引入资源
• 如果确实需要用到Editor组件的能力，再补对应组件的JS/CSS资源即可（注意Editor是商业付费组件，需要合法授权才能商用）

• 配置列定义时一定要和表头的<th>顺序一一对应，不要靠记忆写列索引，很容易出现错位
• 动态渲染的按钮事件一定要用委托绑定，不要直接给动态生成的元素绑事件，否则翻页、重新加载表格后事件会全部失效
• 把用户唯一标识存在按钮的自定义属性上，不要直接从DOM文本里取数据，避免出现格式问题

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