DataTable行不会变成hrefs

Question

我用DataTables创建了一个表，首先，呈现的文档标题（来自本地JSON文件）被包裹在定位标记周围，并变成了hrefs。我对DataTable的初始化进行了一些更改，并向表中添加了一些新列，这些操作可能阻止了文档标题变为hrefs。我不确定100％。

导入表格数据：

loadTableData() {
  $.noConflict();

  let tableRes = KMdocs.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": ""
    }
  });
}

渲染表：

$('#km-table-id').DataTable({
  columns: [
    { data: "Blank" },
    {
      data: "Titles",
      columnDefs: [ // ----- I believe the issue is with this block
        {
          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: [1]
        }
      ],
    },
    {
      data: "Categories",
      searchable: true,
      targets: [ 2 ],
      visible: false
    },
    {
      data: "Blank"
    }
  ],
  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>