jQuery+Laravel环境下DataTable无法重新初始化报错如何解决？

报错根因 #

该报错的核心是 DataTable 实例被重复初始化，你的代码存在两个明显问题：

• 参数互斥冲突：你同时配置了destroy: true和retrieve: true两个逻辑冲突的参数。retrieve的作用是检测到已有实例时直接返回现有实例，不执行初始化；destroy的作用是检测到已有实例时先销毁再新建，二者同时生效会导致初始化逻辑异常。
• 选择器判断不准确：你使用类选择器.data-table-feature做实例存在性判断，如果页面内有多个带该类名的表格，只要有一个已经初始化，判断条件就会返回true，剩余未初始化的表格不会执行初始化逻辑，若后续其他代码尝试初始化该表格就会触发报错。

修复方案 #

优先使用表格唯一ID定位元素，删除冲突的冗余参数即可，优化后代码如下：

$(document).ready(function(){
    // 用唯一ID判断，避免类选择器匹配多元素的问题
    const tableSelector = '#projets_table';
    if (!$.fn.DataTable.isDataTable(tableSelector)) {
        $(tableSelector).DataTable({
            orderCellsTop: true,
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('projets.getdata') }}",
            },
            columns: [
                {data:'numero_projet', name: 'numero_projet'},
                {data: 'client', name: 'client'},
                {data: 'agence_conseil', name: 'agence_conseil'},
                {data: 'agence_production', name: 'agence_production'},
                {data: 'agence_casting', name: 'agence_casting'},
                {data: 'date_tournage', name: 'date_tournage'},
                {data: 'date_premiere_diffusion', name: 'date_premiere_diffusion'},
                {data: 'paye', name: 'paye'},
                {data: 'action', name: 'action', orderable: false}
            ]
        });
    }
});

如果你有动态刷新数据、需要重复初始化表格的场景，可以去掉实例存在性判断，只保留destroy: true即可，代码如下：

$(document).ready(function(){
    $('#projets_table').DataTable({
        destroy: true,
        orderCellsTop: true,
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('projets.getdata') }}",
        },
        columns: [
            // 列配置和上述一致即可
        ]
    });
});

如果修改后仍然报错，排查页面其他位置是否存在重复初始化#projets_table的代码，删除重复逻辑即可解决。

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