jQuery DataTables createdRow无法修改行颜色问题求助

问题分析 #

你的代码存在两个核心语法错误，直接导致回调函数无法触发：

1. createdRow被错误嵌套在ajax配置内：DataTables的createdRow是顶层配置项，不属于ajax的子属性，嵌套后框架无法识别该回调。
2. 判断条件误用DOM元素而非数据对象：createdRow的第一个参数row是DOM行元素，第二个参数data才是该行对应的数据对象，用row.Unit无法获取正确的字段值。

修正后的代码 #

var table = $('#items').DataTable({
    'pageLength': tablelength,
    'lengthMenu': [[10, 15, 20, 25, 50, 1000, -1], [10, 15, 20, 25, 50, 1000, 'All']],
    'ajax': {
        'url': '/LoadItems/',
        'type': 'POST',
        'data': {
            'itemtype': itemtype,
            'displayunits': displayunits
        }
    },
    'createdRow': function (row, data) {
        if (data.Unit == '1') {
            $(row).removeClass('even odd');
            $(row).addClass('unit1');
        }
    },
    'columns': [
        { 'data': 'Id', 'name': 'Id' }, // 0
        { 'data': 'PermitNumber', 'name': 'PermitNumber' }, // 1
        { 'data': 'Unit', 'name': 'Unit' }, // 2
        { 'data': 'Status', 'name': 'Status' }, // 3
        { 'data': 'EnteredDate', 'name': 'EnteredDate' }, // 4
        { 'data': 'EquipmentId', 'name': 'EquipmentId' }, // 5
        { 'data': 'Reason', 'name': 'Reason' }, // 6
        { 'data': 'ClearedDate', 'name': 'ClearedDate' }, // 7
        { 'data': 'Fill', 'defaultContent': '' } // 8
    ],
    'columnDefs': [
        { 'visible': false, 'targets': [0] },
        { 'sortable': false, 'targets': [8] },
        {
            'render': function(data, type, row) {
                return '<span class="detail" id="' + row.Id + '" title="' + row.Id + '">' + row.PermitNumber + '</span>';
            },
            'targets': 1
        }
    ],
    'order': []
});

关键修正说明 #

• 将createdRow从ajax配置中移出，作为DataTables的顶层配置项，确保框架能正确注册回调。
• 把row.Unit改为data.Unit，通过数据对象获取Unit字段值，判断逻辑才能正常生效。
• 用removeClass('even odd')简化多类移除操作，效果与分开调用一致。

若改用rowCallback，需注意它同样是顶层配置项，参数顺序为row, data, displayIndex，判断时仍需使用data.Unit。

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