DataTables与cellEditor销毁重建后编辑单元格报错：Cannot read property 'column'

我之前碰到过完全一样的问题，这个报错Cannot read property 'column' of undefined本质上是销毁表格时没有彻底清理cellEditor的绑定资源，导致新旧实例冲突，点击编辑时引用到了已经失效的旧表格对象。

问题根源 #

DataTables的destroy: true参数只会清理自身的表格实例和相关DOM，但cellEditor插件没有内置的销毁机制——它绑定的点击事件、临时DOM元素（输入框、确认按钮）以及内部存储的表格引用，在表格销毁后依然残留在页面中。当你重建表格并重新初始化cellEditor时，旧的事件监听会被触发，试图访问已经被销毁的旧表格实例的column属性，自然就抛出了undefined错误。

解决方案：销毁表格前先手动清理cellEditor #

我们需要在销毁DataTables实例前，手动移除cellEditor的所有绑定资源，步骤如下：

1. 编写cellEditor清理函数
   这个函数负责移除事件监听、清理残留DOM和重置插件引用：

   function cleanupCellEditor(table) {
     // 移除cellEditor绑定的单元格点击事件（插件默认的事件命名空间是cellEditor）
     table.$('td').off('click.cellEditor');
     // 移除插件生成的编辑元素（根据你的配置类名调整）
     $('.my-input-class, .my-confirm-class, .my-cancel-class').remove();
     // 重置表格对象上的cellEditor引用，避免残留
     if (table.MakeCellsEditable) {
       delete table.MakeCellsEditable;
     }
   }
   

2. 调整代码执行顺序
   按照「清理cellEditor → 销毁表格 → 重建表格 → 重新初始化cellEditor」的顺序执行：

   // 1. 先清理旧的cellEditor资源
   cleanupCellEditor(table);
   // 2. 销毁DataTables实例
   table.destroy();
   // 3. 重新创建DataTables表格（注意修正你原代码里的语法错误：最后一个配置项不要加逗号）
   table = $('#datatable').DataTable({
     "sPaginationType": "full_numbers",
     "createdRow": function(row, data_use, dataIndex) {
       $(row).attr('id', 'line-' + dataIndex);
     },
     "columnDefs": [{
       "targets": "_all",
       "createdCell": function(td, cellData, rowData, row, col) {
         $(td).attr('id', 'cell-' + col);
       }
     }],
     data: data_use,
     columns: column_name,
     dom: 'frtip',
     responsive: true,
     destroy: true,
     searching: true // 这里原代码多了个逗号，要去掉！
   });
   // 4. 重新初始化cellEditor
   table.MakeCellsEditable({
     "onUpdate": myCallbackFunction,
     "inputCss": "my-input-class",
     "columns": [2],
     "confirmationButton": {
       "confirmCss": 'my-confirm-class',
       "cancelCss": 'my-cancel-class'
     },
     "inputTypes": [{
       "column": 2,
       "type": "number",
       "option": null // 这里原代码多了个逗号，建议去掉避免语法问题
     }]
   });
   

额外注意点 #

• 检查你原代码里的语法错误：比如DataTables配置最后一项searching: true后面多了个逗号，cellEditor的inputTypes数组里最后一项也多了个逗号，这些语法错误可能会在某些浏览器里导致意外问题，建议修正。
• 如果你的表格是在异步请求数据后重建的，确保每次重建前都执行了cellEditor的清理步骤，不要遗漏。

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