使用 datatables 时，若以对象数组（data: [{xx:1, yy:2}, ...]）方式传入数据，必须显式指定 columns[].title，否则表头将为空——这是因 datatables 默认不自动从对象键推导列名。

使用 datatables 时，若以对象数组（data: [{xx:1, yy:2}, ...]）方式传入数据，必须显式指定 columns[].title，否则表头将为空——这是因 datatables 默认不自动从对象键推导列名。

DataTables 是一个功能强大的 jQuery 表格插件，但其列标题（header）渲染机制有明确前提：当使用对象数组作为数据源时，columns 配置项中的每个列定义必须包含 title 属性，否则 将渲染为空 标签，导致列名不可见。

在你的原始代码中：

var table = $('#tbl').DataTable({
  columns: [
    { data: "xx" }, 
    { data: "yy" }
  ],
  data: data2
});

虽然 data 字段正确映射了对象属性，但缺少 title，因此 DataTables 无法生成可见的表头文字。解决方法很简单：为每列显式添加 title：

✅ 正确写法（推荐）：

var table = $('#tbl').DataTable({
  columns: [
    { data: "xx", title: "X 值" },
    { data: "yy", title: "Y 值" }
  ],
  data: data2
});

? 进阶技巧：自动从 data 键生成标题（适用于简单场景）
若字段名本身即为理想标题（如 "xx" → "XX"），可借助 JavaScript 动态补全：

const data2 = [
  { "xx": "50", "yy": "30" },
  { "xx": "30", "yy": "20" }
];

// 自动推导 title：首字母大写 + 替换下划线
const columns = Object.keys(data2[0] || {}).map(key => ({
  data: key,
  title: key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, ' ')
}));

$('#tbl').DataTable({
  columns,
  data: data2
});

⚠️ 注意事项：

• HTML 结构必须完整：即使动态渲染表头， 标签仍需存在（无需 或 ，DataTables 会自动生成）；
  CDN 版本兼容性：确保 jQuery、DataTables CSS 和 JS 的加载顺序正确，且版本匹配（推荐使用 cdn.datatables.net 官方稳定版，而非 nightly）；
  避免重复初始化：确保 $('#tbl').DataTable(...) 仅执行一次，重复调用会导致报错；
  响应式与扩展插件：若启用 responsive 或 colreorder 等插件，请确认其依赖已正确引入。

  总结：DataTables 不具备“自动解析对象键为表头”的默认行为。显式声明 columns[].title 是显示列名的必要条件。养成在配置 columns 时同步设置 title 的习惯，既能保证表头可见，也提升了代码可维护性与国际化支持能力。