jQuery DataTables渲染复选框时选中行报错：无法读取'row'属性

问题描述 #

使用jQuery DataTables渲染表格时遇到行选中失效问题：当复选框被渲染为勾选状态后，调用行选中操作会抛出错误Cannot read properties of undefined (reading 'row')。尝试通过rowCallback、createdRow等渲染阶段的回调处理均无效；手动为行添加selected类能看到选中样式，但无法同步到DataTables实例中。想确认是否能在渲染阶段实现行选中。

原核心代码片段：

function renderTable(data) {
    if ($.fn.dataTable.isDataTable('#My_Datatable_Id')) {
        $('#My_Datatable_Id').DataTable().destroy();
    }

    $('#My_Datatable_Id tfoot th').each(function () {
        $(this).html('');
    });

    var tableMyPrivileges = $('#My_Datatable_Id').DataTable({
        data: data,
        responsive: true,
        pageLength: 10,
        order: [],
        columns: [
            { data: "name" },
            {
                data: "is_active", render: function (data, type, full, meta) {
                    if (data == true) {
                        activeGroups.push(data);
                        return '<center><input type="checkbox" checked></center>'
                    } else {
                        return '<center><input type="checkbox"></center>';
                    }
                }
            },
        ],
        columnDefs: [{
            targets: 2,
            orderable: false,
        },
        {
            targets: [0, 1],
            orderable: false
        }
        ],
        select: {
            style: 'multi',
            selector: 'td:last-child input[type="checkbox"]'
        },
        rowGroup: {
            dataSrc: 'group'
        },
        rowCallback: function (row, data, dataIndex) {
            var checkbox = $(row).find('input[type="checkbox"]');
            if (checkbox.is(':checked')) {
                //$(row).select();
                //$(row).toggleClass('selected');      //SELECTS ROW BUT IS NOT PASSED TO DATATABLE
                tableMyPrivileges.row(row).select();   //THROWS ERROR
            }
        },
    // rest of function
}

解决方案 #

1. 报错原因 #

rowCallback是在每行DOM渲染完成后立即执行的，此时整个DataTables实例还未完全初始化完毕，tableMyPrivileges变量还未指向完整的实例对象，所以调用tableMyPrivileges.row(row).select()会触发未定义错误。

2. 可行实现方式 #

使用initComplete回调替代渲染阶段的回调，这个回调会在表格完全初始化完成后执行，此时实例已完全可用，可安全调用行选中方法：

var tableMyPrivileges = $('#My_Datatable_Id').DataTable({
    // 其他配置项...
    select: {
        style: 'multi',
        selector: 'td:last-child input[type="checkbox"]'
    },
    rowGroup: {
        dataSrc: 'group'
    },
    // 替换rowCallback为initComplete
    initComplete: function() {
        var table = this.api();
        // 遍历所有行，根据数据源的is_active字段直接选中行
        table.rows().every(function() {
            var rowData = this.data();
            if (rowData.is_active) {
                this.select();
            }
        });
    }
});

3. 额外修复点 #

• 原代码中columnDefs里的targets: 2无效，因为表格只有2列（索引0和1），会导致控制台报错，建议删除该配置项；
• 无需手动渲染复选框的checked属性后再同步选中状态，直接通过initComplete基于数据源的is_active字段选中行，DataTables的select插件会自动同步复选框的勾选状态，保证视图和实例状态一致。

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