添加DataTables动态显隐列功能时报Cannot reinitialise错误求助

• 你对id为example的表格多次调用DataTable()初始化方法，DataTables不允许重复初始化同一个表格实例，因此抛出该错误。
• 你两段代码分别在独立的$(document).ready中各执行了一次初始化，即使手动合并时没有清理干净原有初始化逻辑，也会继续触发报错。

把所有初始化参数、自定义逻辑全部合并到同一次DataTable初始化过程中，完整代码如下：

<script>
$(document).ready(function(){
    // 仅执行一次初始化，合并所有配置参数
    var table = $('#example').DataTable( {
        "scrollY": "200px",
        "paging": false
    } );
    
    // 原有自定义搜索逻辑
    $('#custom-filter').keyup( function() {
      table.search( this.value ).draw();
    } );

    // 新增列显示隐藏逻辑
    $('a.toggle-vis').on( 'click', function (e) {
        e.preventDefault();
        // 获取列API对象
        var column = table.column( $(this).attr('data-column') );
        // 切换显示状态
        column.visible( ! column.visible() );
    } );
});
</script>

如果合并后仍然出现报错，按以下步骤处理：

• 检查页面所有JS代码，确认没有其他位置再次调用$('#example').DataTable()
• 清理浏览器缓存后重新加载页面，避免旧代码残留导致重复初始化
• 若确实存在无法移除的其他初始化调用，可以在初始化配置中添加"retrieve": true参数，让DataTables返回已存在的实例而非重新初始化，该方案为兼容手段，优先推荐清理冗余初始化代码

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