title: Embedd hyperlink in one column of details DataTables rows
body: <p>This is a follow on question from <a href="https://stackoverflow.com/questions/33487794/datatables-javascript-library-and-nested-json">SO Question</a></p>
  
  <p>From the accepted response I was able to get the table working as shown in the JS Fiddle below</p>
  
  <pre><code>`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 = $("&lt;table&gt;&lt;/table&gt;",{
          "cellpadding":"5",
          "cellspacing": "0",
          "border": "0",
          "style":"padding-left:50px;"
      });
      var tbody = $("&lt;tbody&gt;&lt;/tbody&gt;");
      detail_table.append(tbody);
      $.each(d.subjects, function(k, v){
          var tbody_row = $("&lt;tr&gt;&lt;/tr&gt;").append($("&lt;td&gt;&lt;/td&gt;",{"text": k}));
          if(!header){
              var thead = $("&lt;thead&gt;&lt;/thead&gt;");
              var thead_row = $("&lt;tr&gt;&lt;/tr&gt;")
              thead_row.append($("&lt;th&gt;&lt;/th&gt;",{"text":" "}));
              $.each(v, function(a, b){
                  thead_row.append($("&lt;th&gt;&lt;/th&gt;",{"text":a}));
                  tbody_row.append($("&lt;td&gt;&lt;/td&gt;",{"text":b}));
              });
              thead.append(thead_row);
              detail_table.append(thead);          
              header = true;
          }else{
              $.each(v, function(a, b){
                  tbody_row.append($("&lt;td&gt;&lt;/td&gt;",{"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');
          }
      } );
  } );
  </code></pre>
  
  <p><a href="http://jsfiddle.net/annoyingmouse/mqrckaft/" rel="nofollow noreferrer">JS Fiddle Link</a></p>
  
  <p>However I would really like to get one of the details columns to be a hyperlink. So to be specific how would I make the student's math column be a hyperlink so that when the user clicks on math they are navigated to the math.html link e.g "<a href="http://math.com" rel="nofollow noreferrer">http://math.com</a>".</p>
  
  <p>Just to be clear I believe</p>
  
  <pre><code>$.each(v, function(a, b){
                  tbody_row.append($("&lt;td&gt;&lt;/td&gt;",{"text":b}));
              });
  </code></pre>
  
  <p>Is the portion that is creating the row, what I'd like is to have elemnt X of that row to be a hyperlink while all the other elements can be text.
  I don't really understand javascript so I think that <code>{"text":b}</code> is adding the elements as text to the row. But I don't know how to specify element X of the object v to be a URL, while keeping the rest of the elements of v, as text</p>