DataTables提取数据库指定列到数组时columnDef.targets用法

场景说明 #

• 业务需求：提取从empid到mname区间的列，数据源为后端从数据库读取后返回的顺序数组
• 原有初始化代码：

$(document).ready(function() {
  $('#empList').DataTable({
    'fnCreatedRow': function(nRow, aData, iDataIndex) {
      $(nRow).attr('empid', aData[0]);
    },
    'serverSide': 'true',
    'processing': 'true',
    'paging': 'true',
    'order': [],
    'ajax': {
      'url': 'fetch_emp.php',
      'type': 'post',
    },
    "aoColumnDefs": [{
        "bSortable": false,
        "aTargets": [0,4]
      },
    ]
  });
});

• 问题表现：将aTargets参数修改为字符串"_all"后仍然触发报错，需要明确数组类数据源场景下columnDef.targets的正确配置方式
• 报错参考截图：
  

正确配置方法 #

先修复原有代码的基础错误 #

原有代码有两个高频触发报错的问题，优先修复：

• 布尔类型配置不要传字符串：serverSide、processing、paging是布尔型配置项，必须传原生布尔值true，不能传字符串'true'，类型不匹配会导致列解析逻辑完全失效
• 版本兼容问题：DataTables 1.10及以上版本推荐使用驼峰命名的columnDefs、targets配置，旧版匈牙利命名aoColumnDefs、aTargets虽然做了向下兼容，但和"_all"这类特殊字符串targets搭配时经常出现校验报错

targets配置规则（数组数据源场景） #

针对后端返回顺序数组的场景，targets支持三种合法写法，按需选择即可：

1. 指定列索引区间：如果明确empid是第0列、mname是第N列，直接把区间内所有列的索引放进数组即可，比如empid到mname跨0-4列就写targets: [0,1,2,3,4]，这是数组数据源下最稳定的写法
2. 全列生效：要对所有列应用规则时，直接写targets: "_all"即可，注意不要漏写下划线，也不要额外加多余的空格
3. 选择器匹配：如果表头<th>标签加了对应字段的class（比如<th class="empid">、<th class="mname">），可以直接写CSS选择器匹配，比如targets: '.empid, .mname'

修复后可运行代码示例 #

$(document).ready(function() {
  $('#empList').DataTable({
    'fnCreatedRow': function(nRow, aData, iDataIndex) {
      $(nRow).attr('empid', aData[0]);
    },
    // 布尔配置传原生布尔值
    'serverSide': true,
    'processing': true,
    'paging': true,
    'order': [],
    'ajax': {
      'url': 'fetch_emp.php',
      'type': 'post',
    },
    // 使用新版命名规范
    "columnDefs": [{
        "bSortable": false,
        // 全列生效用"_all"，指定区间直接传索引数组，例：0到4列就写[0,1,2,3,4]
        "targets": "_all"
      }
    ]
  });
});

补充提示：如果后续列顺序可能调整，不要硬编码索引，优先在初始化时加columns配置做字段和列的映射，targets会自动匹配映射后的列，不会出现索引错位问题。

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