title: jQuery DataTables - Child Rows and "Undefined is Not a Function"
body: <p>I'm working to add child rows to a data table and am getting a "TypeError: undefined is not a function" for a line of code that works perfectly on a different table and page. Any ideas?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="table-responsive"&gt;
      &lt;h2 class="sub-header"&gt;Account Users&amp;nbsp;&lt;a href="?q=support"&gt;&lt;span class="glyphicon glyphicon-question-sign"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;
      &lt;table id="users_table" class="table table-striped embedded_table"&gt;
          &lt;thead&gt;
              &lt;tr class="text-center"&gt;
                  &lt;th&gt;&lt;/th&gt;
                  &lt;th&gt;User Name&lt;/th&gt;
                  &lt;th&gt;Full Name&lt;/th&gt;
                  &lt;th&gt;User Type&lt;/th&gt;
                  &lt;th&gt;Assigned Device&lt;/th&gt;
                  &lt;th&gt;Date Added&lt;/th&gt;
                  &lt;th&gt;Action&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript/jQuery:</p>
  
  <pre><code>&lt;script&gt;
  function format ( d ) {
      var html = '&lt;table id="child_table" class="text-right" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;"&gt;'+
          '&lt;tr&gt;'+
              '&lt;td&gt;Email Address:&lt;/td&gt;'+
              '&lt;td&gt;'+ d.email_address +'&lt;/td&gt;'+
              '&lt;td&gt;Time Zone:&lt;/td&gt;'+
              '&lt;td&gt;'+ d.timezone +'&lt;/td&gt;'+
          '&lt;/tr&gt;'+
          '&lt;tr&gt;'+
              '&lt;td&gt;Create Date:&lt;/td&gt;'+
              '&lt;td&gt;'+ d.create_date +'&lt;/td&gt;'+
              '&lt;td&gt;Last Login:&lt;/td&gt;'+
              '&lt;td&gt;'+ d.last_login +'&lt;/td&gt;'+
          '&lt;/tr&gt;'+
          '&lt;/table&gt;';
  
      return html;
  }
  
  $(document).ready(function() {
      username = "&lt;?php echo($_SESSION["username"]); ?&gt;";
      userType = "&lt;?php echo($_SESSION["user_type"]); ?&gt;";
  
      var table = $('#users_table').dataTable({
          order: [1, 'asc'],
          "ajax": {
              "url": "/s/user_data.php",
              "dataSrc" : ""
          },
          "language": {
              "search": "Search:&amp;nbsp;"
          },
          "columns": [
              {"data": null, "class": "details-control", "orderable": false, "defaultContent": "", "width": "2%"},
              {"data": "username", "name": "username", "width": "20%"},
              {"data": "fullName", "name": "fullName", "width": "20%"},
              {"data": "type", "name": "type", "width": "15%"},
              {"data": "cal_color", "name": "cal_color", "width": "15%"},
              {"data": "create_date", "type": "date", "name": "create_date", "visible": false},
              {"data": "time_zone", "name": "time_zone", "visible": false},
              {"data": "last_login", "type": "date", "name": "last_login", "visible": false},
              {"data": "email_address", "name": "email_address", "visible": false},
              {"data": "uid", "name": "uid", "visible": false}
          ]
      });
  
      // Add event listener for opening and closing details
      $('#users_table').find('tbody').on('click', 'td.details-control', function () {
          var tr = $(this).closest('tr');
          var td = $(this).closest('td');
          var row = table.row(tr);
  
          console.log(tr);
          console.log(td);
          console.log(row);
  
          if(row.child.isShown())
          {
              // This row is already open - close it
              row.child.hide();
              tr.removeClass('shown');
              td.removeClass('shown');
          }
          else
          {
              // Open this row
              row.child(format(row.data())).show();
              tr.addClass('shown');
              td.addClass('shown');
          }
      });
  });
  </code></pre>
  
  <p></p>
  
  <p>The line of code that generates the error is as follows. It's under the comment "Add event listener for opening and closing details" in the bottom third of the script.</p>
  
  <pre><code>var row = table.row(tr);
  </code></pre>
  
  <p>Like I said, I'm using the same listener on another table and this line isn't an issue there. I've checked my punctuation multiple times and don't see any missing commas, semicolons, or quotes. You can see that I have 3 lines writing to the console log. Here's what I get if I comment out the offending line:</p>
  
  <pre><code>[tr.even, prevObject: n.fn.init[1], context: td.details-control, jquery: "1.11.0", constructor: function, selector: ""…]
  [td.details-control, prevObject: n.fn.init[1], context: td.details-control, jquery: "1.11.0", constructor: function, selector: ""…]
  </code></pre>
  
  <p>I'm not a strong javascript or jQuery developer. All comments and suggestions are welcome.</p>
  
  <p>Thanks.</p>