jQuery DataTable如何添加并获取列的自定义data-type属性

你在DataTables的columns配置中定义的data-type是自定义配置项，DataTables默认不会自动将其映射到生成的<td>元素的HTML属性上，所以直接用$(this).data("type")无法读取到对应值。

方案1：直接通过DataTables API读取初始化配置（推荐，无需修改原有表格配置） #

仅修改双击事件代码即可直接读取配置中存储的data-type值：

$('#maintable tbody').on('dblclick', '.inv-editable', function() {
  var value = $(this).text();
  // 获取当前单元格对应的列索引
  var colIndex = table.cell(this).index().column;
  // 从表格初始化配置中读取对应列的自定义data-type
  var data_type = table.settings().init().columns[colIndex]['data-type'];

  // 优化输入框生成逻辑，修正原代码重复定义class、自定义属性不符合规范的问题
  var input = `<input type="text" class="input-data form-control" data-type="${data_type}" value="${value}">`;
  
  $(this).html(input);
  $(this).removeClass("inv-editable");
});

方案2：让DataTables生成单元格时自动挂载data-type属性 #

修改列配置，添加createdCell回调，在单元格生成时主动给<td>加上data-type属性，你原有的$(this).data("type")逻辑即可正常运行：

// 仅展示修改后的三个可编辑列配置，其余配置保持不变
"columns": [
  // 前面的编辑、删除按钮列保持不变
  {
    "data": "investor",
    "className": 'inv-editable', // 建议替换原有class为DT标准属性className
    "data-type": 'investor',
    "createdCell": function(td) {
      $(td).attr('data-type', 'investor');
    }
  }, {
    "data": "amount",
    "type": "num-fmt",
    "className": 'inv-editable',
    "data-type": 'amount',
    "createdCell": function(td) {
      $(td).attr('data-type', 'amount');
    }
  }, {
    "data": "code",
    "className": 'inv-editable',
    "data-type": 'code',
    "createdCell": function(td) {
      $(td).attr('data-type', 'code');
    }
  }
]

• 列配置中的类名属性建议使用DataTables官方定义的className，不要使用class，避免出现兼容问题
• 自定义HTML属性建议统一加data-前缀，符合HTML规范，避免和原生属性冲突

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