向DataTable复制表标题添加列

Question

第一次创建DataTable时，我有两列：一列用于行标题，第二列用于隐藏类别列。我还为每个行对应的复选框提供了一个非DT列。

我想在表中再添加两列，但是由于某种原因，我的表头重复了。 Here's a screencap显示问题：

理想情况下，我希望标题显示如下：

                Location of hidden categories column
                           |
                           V
|--------------|--Title----|--My Favorites-| // ----- Header
|file ext. icon|-Doc Title-|--[check box]--| // ----- Row

作为旁注，我也看不到我创建的复选框。

有什么想法吗？

获取本地JSON数据：

loadTableData() {
    $.noConflict();
    let tableRes = JSONfile.d.results.filter(function(val) { 
      return (val.FileLeafRef.trim().length > 0);
    }).map(function(obj) {
      return {
        "Path": obj.EncodedAbsUrl,
        "Titles": obj.File.Name,
        "Categories": obj.ResourceType.results.map(function(val) {
          return val.Label;
        }).join(";"),
        "Blank": '' // ----- Does work for me (see below)
        }
      });

渲染数据表：

$('#km-table-id').DataTable( {
      columns: [
        { data: "Blank" },
        { data: "Titles" }, // populates col-2 column with docs
        { data: "Categories" }, // hidden col-3 categories
        { data: "Blank" }
      ],
      columnDefs: [
        {
          data: "Path",
          ordering:  true, targets: [1],
          render: function(data, type, row) {
            return $('<a>')
              .attr({target: "_blank", href: row.Path})
              .text(data)
              .wrap('<div></div>')
              .parent()
              .html();
          },
          targets: 0
        },
        { searchable: true, targets: [2], visible: false }, 
      ],
    //   aoColumnDefs: [{
    //     orderable: false, aTargets:[0, 2, 3]
    //  }],
      data: tableRes,
      language: { searchPlaceholder: "Search All Documents" },
      lengthMenu: [ 10, 25, 50, 100, 250, 500 ],
      order: [],
      pageLength: 500,
      paging: true,
      pagingType: "full_numbers",
      responsive: true,
        scrollCollapse: true,
        scrollXInner: true,
        scrollY: 550,
      sDom: '<"top">rt<"bottom"flp><"left">' // puts dropdown on bottom
    });

HTML片段：

<table id="km-table-id" class="cell-border display stripe-hover">
   <thead>
      <tr>
        <th></th>
        <th>Title</th>
        <th>Categories</th>
        <th>My Favorites</th>
      </tr>
   </thead>    
   <tbody></tbody>     
  </table>