嵌套Datatable切换分类加载失败：Uncaught TypeError错误求助

从你提供的错误信息（Uncaught TypeError: Cannot read property 'style' of undefined）和代码来看，这个问题大概率出在表格重新初始化后的事件绑定冲突，以及列定义中的错误配置上，下面是具体的排查和修复方案：

1. 修复列定义中的错误配置 #

在你的assignToEventColumns函数的列定义里，最后两列的targets配置是多余且错误的：

{"data":"item",visible:false,targets:[8]},
{"data":"category",visible:false}

targets参数是用于columnDefs配置中指定列索引的，而在columns数组里，每个元素本身就对应一列的顺序，不需要额外指定targets。多余的targets:[8]会导致Datatable在重新初始化时，列索引匹配混乱，进而引发DOM操作错误。

修改为：

{"data":"item", visible:false},
{"data":"category", visible:false}

2. 优化嵌套表格的事件绑定逻辑 #

你的bindDetails()函数负责绑定嵌套表格的展开/折叠事件，但在每次重新初始化Datatable后，旧的DOM元素已经被销毁，新的表格元素需要重新绑定事件，且要避免重复绑定导致的冲突。

第一步：修改bindDetails()函数，先解绑旧事件再绑定新事件 #

假设你的bindDetails()是类似官方嵌套表格的实现，修改为：

function bindDetails() {
    // 先解绑之前绑定的点击事件，避免重复触发
    $('#dtMyComplaints tbody').off('click', 'td.details-control');
    
    // 绑定新的点击事件到新的表格元素
    $('#dtMyComplaints tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row(tr);

        if (row.child.isShown()) {
            // 关闭嵌套表格
            row.child.hide();
            tr.removeClass('shown');
            $(this).html('<i class="fa fa-plus-square" aria-hidden="true"></i>');
        } else {
            // 打开嵌套表格（这里的format函数是你渲染嵌套表格的逻辑，根据你的实际代码调整）
            row.child(format(row.data())).show();
            tr.addClass('shown');
            $(this).html('<i class="fa fa-minus-square" aria-hidden="true"></i>');
        }
    });
}

第二步：将事件绑定放在Datatable的initComplete回调中 #

确保表格完全初始化完成后再绑定事件，避免DOM元素未就绪的问题：
修改assignToEventColumns函数中的Datatable初始化代码，添加initComplete回调：

table = $('#dtMyComplaints').DataTable({
    destroy: true,
    "processing": true,
    "data": response.data,
    "columns": [
        // ... 你的列定义（已经修复了targets的部分）
    ],
    "initComplete": function(settings, json) {
        // 表格初始化完成后再绑定嵌套表格事件
        bindDetails();
    }
});

这样就不需要在success回调中单独调用bindDetails()了，可以把success里的bindDetails()移除：

success: function (data) {
    assignToEventColumns(data); //bind to datatable
    // bindDetails(); // 移除这一行，改由initComplete回调触发
}

3. 确保下拉框的切换事件正确触发getComplaintData() #

最后，检查你的下拉框（#mainCategory）是否正确绑定了change事件，确保切换分类时会调用getComplaintData()：

$(function(){
    getComplaintData();
    // 添加下拉框切换事件
    $("#mainCategory").on("change", function() {
        getComplaintData();
    });
    // Add event listener for opening and closing details
});

验证修复效果 #

做完以上修改后，切换分类时：

1. Datatable会正确销毁旧实例并创建新实例
2. 嵌套表格的事件会正确绑定到新的DOM元素上
3. 列定义的错误被修复，不会引发索引匹配问题

这样应该就能解决你遇到的Cannot read property 'style' of undefined错误，实现分类切换后正常加载新数据的功能。

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