当使用对象数组作为数据源初始化 DataTables 时，若未显式指定 title 属性，表头将为空；必须为每列的 columns 配置项添加 title 字段才能渲染列名。
当使用对象数组作为数据源初始化 datatables 时，若未显式指定 `title` 属性，表头将为空；必须为每列的 `columns` 配置项添加 `title` 字段才能渲染列名。
DataTables 默认不会自动从对象键（如 "xx"、"yy"）推断列标题——它只依赖 columns 数组中每个对象的 title 属性来渲染表头 <th> 内容。即使你已正确定义 data 字段用于映射数据源字段，缺少 title 将导致 <thead> 区域渲染为空 <th></th>，从而出现“列名不可见”的问题。
✅ 正确写法：显式声明 title
$(document).ready(function() {
var data2 = [
{ "xx": "50", "yy": "30" },
{ "xx": "30", "yy": "20" }
];
$('#tbl').DataTable({
data: data2,
columns: [
{ data: "xx", title: "X 值" }, // ← 必须包含 title
{ data: "yy", title: "Y 值" } // ← 否则表头空白
]
});
});<!-- 确保 HTML 中 table 元素存在且有 ID --> <table id="tbl" class="display" width="100%"></table>
⚠️ 注意：<table> 标签内不应预先编写 <thead> 或 <tbody>（除非你采用 DOM 初始化方式）。当使用 data + columns 方式初始化时，DataTables 会自动生成完整表格结构，包括带 title 的 <th>。
? 自动填充 title（可选优化）
若字段名本身即为理想标题（如 "xx" → "XX"），可编程补全 title，避免硬编码：
const rawData = [
{ "xx": 50, "yy": 30 },
{ "xx": 30, "yy": 20 }
];
// 自动将 data 字段首字母大写作为 title
const columns = Object.keys(rawData[0] || {}).map(key => ({
data: key,
title: key.toUpperCase() // 或使用 toTitleCase() 等自定义函数
}));
$('#tbl').DataTable({
data: rawData,
columns: columns
});? 关键要点总结
- ❌ 错误：仅配置 { data: "xx" } → 表头 <th> 无文本，视觉上“消失”；
- ✅ 正确：必须为每列提供 title，如 { data: "xx", title: "X 坐标" }；
- ? CDN 推荐使用稳定版而非 nightly（生产环境应替换为 https://www.php.cn/link/9153d9c5735bdd40f73b2e94265ab899 的正式版本）；
- ? 若需服务端渲染或复杂模板，请改用 <thead> 预定义方式，但本场景属客户端对象数组初始化，以 columns.title 为准。
遵循以上规则，即可确保 DataTables 表头列名清晰、可维护且符合语义化 HTML 标准。
