DataTables动态生成表头出现重复，求助错误原因与修复方法

手动编写表头时，表格显示正常：

<div class="table-responsive">
 <table class="table table-bordered" id="example" style="width:100%;">
  <thead>
   <tr>
    <th>Header1</th>
    <th>Header2</th>
    <th>Header3</th>
    <th>Header4</th>
   </tr>
  </thead>
 </table>
</div>

但通过数据库动态生成表头时，出现了两层重复的表头：

<div class="table-responsive">
 <table class="table table-bordered" id="example" style="width:100%;">
  <thead>
   <? foreach ($kolom as $row) : ?>
    <th><? echo $row ?></th>
   <? endforeach; ?>
  </thead>
 </table>
</div>

重复效果如下：

| Header1 | Header2 | Header3 | Header4 |
| Header1 | Header2 | Header3 | Header4 |

其中$kolom数组内容为：

Array ( [0] => Header1 [1] => Header2 [2] => Header3 [3] => Header4 )

使用的DataTables初始化脚本：

$(document).ready(function() {
  var dataTable;
  dataTable = $('#example').DataTable({
   "columnDefs": [{
                    "defaultContent": "-",
                    "targets": "_all"
                 }],
   "aoColumns": [
                 {data : "f1"},
                 {data : "f2"},
                 {data : "f3"},
                 {data : "f4"}
                ],
   "scrollCollapse": true,
   "fixedColumns": {
                    "left": 1
                   },
   'processing': true,
   'language': {
                 "loadingRecords": ' ',
                 "processing" : '<i class="fa fa-spinner fa-spin" style="font-size:24px;color:rgb(75, 183, 245);"></i>'
               },
   "scrollX": true,
  });
 });

问题原因 #

动态生成表头时，没有用<tr>标签包裹所有<th>元素。HTML表格规范中，表头单元格<th>必须放在<tr>行标签内，DataTables初始化时会自动修复不符合规范的表格结构——为零散的<th>生成一层新的<tr>，加上你动态输出的<th>本身没有父级<tr>，最终就出现了两层重复的表头。

解决方案 #

修改动态表头的代码，将循环生成的<th>包裹在<tr>标签中：

<div class="table-responsive">
 <table class="table table-bordered" id="example" style="width:100%;">
  <thead>
   <tr>
    <? foreach ($kolom as $row) : ?>
     <th><? echo $row ?></th>
    <? endforeach; ?>
   </tr>
  </thead>
 </table>
</div>

这样生成的HTML结构和手动编写的完全一致，DataTables初始化时不会额外生成表头，只会显示一层正确的表头。

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