DataTable表格数据正常但表头列名不显示，求解决方法

你遇到的问题是因为没有定义表头列名——不管是在HTML的表格结构里，还是DataTables的配置项中，都没指定每列的标题，所以表头区域是空的。下面提供两种可行的解决方式：

方法一：在HTML表格中直接定义表头 #

修改你的HTML代码，给table添加<thead>和<th>标签，明确写出每列的标题：

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

<table id="tbl" width="100%">
  <thead>
    <tr>
      <th>XX数值</th>
      <th>YY数值</th>
    </tr>
  </thead>
</table>

JS代码无需修改，DataTables会自动识别<thead>中的<th>作为表头列名。

方法二：在DataTables配置中指定列标题 #

如果你需要动态生成表头，可以在JS的columns配置项里给每一列添加title属性：

$(document).ready(function() {
      var data2 = [
        {
          "xx": "50",
          "yy": "30"
        },
        {
          "xx": "30",
          "yy": "20"
        }
      ];
      var table = $('#tbl').DataTable({
        columns: [
          { data: "xx", title: "XX数值" }, 
          { data: "yy", title: "YY数值" }
        ],
        data: data2
      })
});

HTML中的空table保持原样即可，DataTables会根据配置的title自动生成表头。

两种方法任选其一都能解决表头不显示的问题，前者适合静态固定表头的场景，后者更适合需要动态设置列名的需求。

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