Делаем элементы таблицы (из JSON) связанными

Question

У меня есть файл JSON, который содержит заголовки документов и URL для каждого. До сих пор я был в состоянии отобразить каждый документ в таблицу, созданную с помощью DataTables.. Я также отобразил каждый URL в первой строке таблицы в качестве теста. Хорошо, что они появились, но это не то, ради чего я иду.

Как сделать так, чтобы заголовок каждого документа был связан с соответствующим URL? Я не видел никакой информации. об этом в руководстве по DataTables или на его форуме, поэтому я подумал, что спросить.

Если вы хотите увидеть фрагмент файла JSON, пожалуйста, дайте мне знать.

JS фрагмент:

import $ from 'jquery';

import JSONfile from '../../../public/JSONfile.json';
import { basename } from 'path';

import dt from 'datatables.net';

var tableRes = '';

    export default class {
        constructor() {
            this.loadTableData();
        }

 loadTableData() {
    $.noConflict();
    let tableRes = JSONfile.d.results.filter(function(val) {
      return (val.FileLeafRef.trim().length > 0);
    }).map(function(obj) {

      return {
        // "FileName": obj.FileLeafRef,
        // "Path": obj.EncodedAbsUrl, ///// these are the URLs for each document
        "Titles": obj.File.Name
        }
      });

    $('#km-table-id').DataTable( {
      columns: [
        { "data": " " },
        { "data": "Titles" }, ///// Ideally I want each Title to be linked in the table---i.e. the document names appearing blue
        { "data": " " }
      ],
      data: tableRes,
      "pagingType": "full_numbers"
    });

 } // ------- loadTableData

} // ------- export default class

Answer 1

Обновление: Благодаря пользователю на форуме DataTables мне удалось найти решение. Проще говоря, мне пришлось использовать columDefs, что было подробно описано в разделе columns.render документации :

Фрагмент кода:

      return {
        "Path": obj.EncodedAbsUrl,
        "Titles": obj.File.Name
        }
      });

    $('#km-table-id').DataTable( {
      columns: [
        { data: "Path" }, // populates rows with each document link
        { data: "Titles" }, // populates rows with docs
        { data: "check" }
      ],
      columnDefs: [ {
        targets: 0,
        data: "Path",
        render: function(data) {
          return '<a href="'+data+'">Download</a>';
        }
      }],
...

Гиперссылка фактических ячеек документа:

 columnDefs: [
        {
          data: "Path",
          render: function(data, type, row) {
            return $('<a>')
              .attr({target: "_blank", href: row.Path})
              .text(data)
              .wrap('<div></div>')
              .parent()
              .html();
          },
          targets: [] // Column position
        },
...