возможность размещения гиперссылки в одном столбце детали DataTables строк

Question

Это является продолжением на вопрос от SO Question

От принятого ответа я был в состоянии получить таблицу работает, как показано в JS Fiddle ниже

`var data = {"data":[{"student_name":"jack","subjects":{"math":{"cat1_grade":"30","cat2_grade":"39","cat3_grade":"38"},"english":{"cat1_grade":"30","cat2_grade":"39","cat3_grade":"38"},"swahili":{"cat1_grade":"30","cat2_grade":"39","cat3_grade":"38"}},"subject1_average":"35","subject2_average":"26","subject3_average":"59"}]}; 

/* Formatting function for row details - modify as you need */ 
function format (d) { 
    // `d` is the original data object for the row 
    var header = false; 
    var detail_table = $("<table></table>",{ 
     "cellpadding":"5", 
     "cellspacing": "0", 
     "border": "0", 
     "style":"padding-left:50px;" 
    }); 
    var tbody = $("<tbody></tbody>"); 
    detail_table.append(tbody); 
    $.each(d.subjects, function(k, v){ 
     var tbody_row = $("<tr></tr>").append($("<td></td>",{"text": k})); 
     if(!header){ 
      var thead = $("<thead></thead>"); 
      var thead_row = $("<tr></tr>") 
      thead_row.append($("<th></th>",{"text":" "})); 
      $.each(v, function(a, b){ 
       thead_row.append($("<th></th>",{"text":a})); 
       tbody_row.append($("<td></td>",{"text":b})); 
      }); 
      thead.append(thead_row); 
      detail_table.append(thead);   
      header = true; 
     }else{ 
      $.each(v, function(a, b){ 
       tbody_row.append($("<td></td>",{"text":b})); 
      }); 
     } 
     tbody.append(tbody_row);  
    }); 
    return detail_table; 
} 

$(document).ready(function() { 
    var table = $('#example').DataTable({ 
     "ajax": { 
      "url": '/echo/js/?js=' + encodeURIComponent(JSON.stringify(data)), 
     }, 
     "columns": [ 
      { 
       "className":  'details-control', 
       "orderable":  false, 
       "data":   null, 
       "defaultContent": '' 
      }, 
      { "data": "student_name" }, 
      { "data": "subject1_average" }, 
      { "data": "subject2_average" }, 
      { "data": "subject3_average" } 
     ], 
     "order": [[1, 'asc']] 
    }); 

    // Add event listener for opening and closing details 
    $('#example tbody').on('click', 'td.details-control', function() { 
     var tr = $(this).closest('tr'); 
     var row = table.row(tr); 

     if (row.child.isShown()) { 
      // This row is already open - close it 
      row.child.hide(); 
      tr.removeClass('shown'); 
     } 
     else { 
      // Open this row 
      row.child(format(row.data())).show(); 
      tr.addClass('shown'); 
     } 
    }); 
}); 

JS Fiddle Link

Однако я бы очень хотел, чтобы один из столбцов деталей был гиперссылкой. Поэтому, чтобы быть конкретным, как сделать, чтобы математический стол студента был гиперссылкой, так что, когда пользователь нажимает на математику, они перемещаются по ссылке math.html, например, «http://math.com».

Просто чтобы быть ясно, что я считаю,

$.each(v, function(a, b){ 
       tbody_row.append($("<td></td>",{"text":b})); 
      }); 

ли часть, которая создает строку, что я хотел бы, чтобы иметь elemnt X этой строки будет гиперссылки, а все остальные элементы могут быть текст. Я действительно не понимаю javascript, поэтому считаю, что {"text":b} добавляет элементы в текст в строку. Но я не знаю, как определить элемент Х объекта против быть URL, сохраняя при этом остальные элементы V, как текст

Answer 1

Изменение:

var tbody_row = $("<tr></tr>").append($("<td></td>",{"text": k})); 

в

var tbody_row = $("<tr></tr>").append($("<td></td>",{"html": '<a href="' + k + '.html">' + k + '</a>'})); 

для создания ссылок на math.html, если предметом является math.

См. updated jsFiddle для кода и демонстрации.