使用 datatables 时，若以对象数组（data: [{xx:1, yy:2}, ...]）方式传入数据，必须显式指定 columns[].title，否则表头将为空——这是因 datatables 默认不自动从对象键推导列名。
使用 datatables 时，若以对象数组（data: [{xx:1, yy:2}, ...]）方式传入数据，必须显式指定 columns[].title，否则表头将为空——这是因 datatables 默认不自动从对象键推导列名。
DataTables 是一个功能强大的 jQuery 表格插件，但其列标题（header）渲染机制有明确前提：当使用对象数组作为数据源时，columns 配置项中的每个列定义必须包含 title 属性，否则 <thead> 将渲染为空 <th> 标签，导致列名不可见。
在你的原始代码中：
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 结构必须完整：即使动态渲染表头，<table> 标签仍需存在（无需 <thead> 或 <tbody>，DataTables 会自动生成）；
- CDN 版本兼容性：确保 jQuery、DataTables CSS 和 JS 的加载顺序正确，且版本匹配（推荐使用 cdn.datatables.net 官方稳定版，而非 nightly）；
- 避免重复初始化：确保 $('#tbl').DataTable(...) 仅执行一次，重复调用会导致报错；
- 响应式与扩展插件：若启用 responsive 或 colreorder 等插件，请确认其依赖已正确引入。
总结：DataTables 不具备“自动解析对象键为表头”的默认行为。显式声明 columns[].title 是显示列名的必要条件。养成在配置 columns 时同步设置 title 的习惯，既能保证表头可见，也提升了代码可维护性与国际化支持能力。
