DataTable动态重载后行点击取数报错 informe未定义TypeError

问题根因 #

报错由三个典型的使用错误导致：

• 每次下拉框触发change事件重载表格时，都会重复给#table_prueba绑定一次tr点击事件，切换N次下拉就会累计绑定N个重复的事件监听
• 旧的事件监听通过闭包引用的是已经被destroy销毁的历史DataTable实例，触发点击时旧实例无法匹配当前DOM行，调用row(this).data()会返回undefined，访问undefined.name就直接抛出Uncaught TypeError
• 点击表头<tr>时也会触发绑定的事件，表头行不属于数据行，本身没有绑定业务数据，同样会触发同类报错

修复方案 #

核心调整逻辑：

• 行点击事件只在页面初始化时绑定一次，不要放在change回调里重复绑定
• 事件触发时实时获取当前生效的DataTable实例，不要用闭包缓存可能被销毁的旧实例
• 增加非数据行过滤和空值兜底逻辑，覆盖边缘点击场景
• 增加实例存在性判断，避免首次加载时销毁不存在的实例报错

修复后完整代码 #

index.html（无需调整，原有代码可正常使用） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo mínimo</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <!-- DataTables -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
    <script src="index.js"></script>
</head>
<body>
    <h1>Este es el ejemplo mínimo para que de error el DataTable</h1>
    <select name="prueba_select" id="prueba_select">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <table id="table_prueba"></table>
    <div id="item_selected">    </div>
</body>
</html>

index.js（替换原有代码即可） #

$(document).ready(function () {
    // 缓存表格实例引用
    let tablaInformes;

    // 监听下拉切换重载表格
    $('#prueba_select').change(function (e) { 
        e.preventDefault();
        // 已存在实例则先销毁
        if ($.fn.DataTable.isDataTable('#table_prueba')) {
            $('#table_prueba').DataTable().destroy();
            // 清空表格原有DOM内容，避免残留
            $('#table_prueba').empty();
        }
        // 重新初始化表格
        tablaInformes = $('#table_prueba').DataTable({
            "data": [
                {
                    "name":       "Tiger Nixon",
                    "position":   "System Architect",
                    "salary":     "$3,120",
                    "start_date": "2011/04/25",
                    "office":     "Edinburgh",
                    "extn":       5421
                },
                {
                    "name": "Garrett Winters",
                    "position": "Director",
                    "salary": "5300",
                    "start_date": "2011/07/25",
                    "office": "Edinburgh",
                    "extn": "8422"
                }
            ],
            "columns": [
                { "data": "name" },
                { "data": "position" },
                { "data": "office" },
                { "data": "extn" },
                { "data": "start_date" },
                { "data": "salary" }
            ]
        });
    });

    // 行点击事件仅绑定一次，放在change回调外部
    $('#table_prueba').on('click', 'tr', function () {
        // 过滤表头、表尾的非数据行
        if ($(this).find('th').length > 0) return;
        // 实时获取当前生效的表格实例
        const currentTable = $('#table_prueba').DataTable();
        const informe = currentTable.row(this).data();
        // 空值兜底
        if (!informe) return;
        $('#item_selected').html('<h3>' + informe.name + '</h3>');
    });

    // 页面首次加载时触发一次下拉切换，完成表格初始化
    $('#prueba_select').trigger('change');
});

额外优化点 #

• 销毁实例后主动清空表格DOM内容，避免重载时残留旧表格结构导致的渲染异常
• 通过判断行内是否存在th元素过滤表头点击，比判断class兼容性更好
• 无需在每次重载时重新绑定事件，减少不必要的内存占用

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