title: DataTable child rows aren't showing up
body: <p>I tried using the child rows feature from DataTables, but I'm doing something wrong, not sure what. (I'm new to DataTables)
  I'm trying to add some static child rows, just to see it's working (no AJAX).
  Clicking on the first column just adds the 'shown' class to the row, but no child row is added.</p>
  
  <p>Also, no error is thrown.</p>
  
  <p>I followed their example from <a href="https://www.datatables.net/release-datatables/examples/api/row_details.html" rel="nofollow">here</a>, removing the AJAX data. 
  I know it doesn't make any sense in my example (clicking an icon and showing the table from that link), but I just want to go in small steps.</p>
  
  <p>This is what I've got for now:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table id='&lt;%= league.name %&gt;' class="event-table display responsive no-wrap"&gt;
            &lt;thead&gt;
            &lt;tr&gt;
              &lt;th class="event-badge"&gt;&lt;/th&gt;
              &lt;th class="event-shirt"&gt;&lt;/th&gt;
              &lt;th class="event-team"&gt;&lt;/th&gt;
              &lt;th class="event-dash"&gt;&lt;/th&gt;
              &lt;th class="event-team"&gt;&lt;/th&gt;
              &lt;th class="event-shirt"&gt;&lt;/th&gt;
              &lt;th class="event-badge"&gt;&lt;/th&gt;
            &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
            &lt;% events.each do |event| %&gt;
                &lt;tr class="event-row"&gt;
                  &lt;td class="event-badge"&gt;&lt;%= image_tag event.home_team.badge_url, :class =&gt; 'team-badge' %&gt;&lt;/td&gt;
                  &lt;td class="event-shirt"&gt;&lt;%= image_tag event.home_team.shirt_url, :class =&gt; 'team-shirt' %&gt;&lt;/td&gt;
                  &lt;td class="event-team"&gt;&lt;%= event.home_team.name %&gt;&lt;/td&gt;
                  &lt;td class="event-dash"&gt; - &lt;/td&gt;
                  &lt;td class="event-team"&gt;&lt;%= event.away_team.name %&gt;&lt;/td&gt;
                  &lt;td class="event-shirt"&gt;&lt;%= image_tag event.away_team.shirt_url, :class =&gt; 'team-shirt' %&gt;&lt;/td&gt;
                  &lt;td class="event-badge"&gt;&lt;%= image_tag event.away_team.badge_url, :class =&gt; 'team-badge' %&gt;&lt;/td&gt;
                &lt;/tr&gt;
            &lt;% end %&gt;
            &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var table = $('.event-table').DataTable({
      "bJQueryUI": true,
      "bPaginate": false,
      "bFilter": false,
      "bInfo": false,
      "columns": [
          {
              "className": "details-control",
              "data": "badge-home"
          },
          {
              "data": "shirt-home"
          },
          {
              "data": "name-home"
          },
          {
              "data": "dash"
          },
          {
              "data": "name-away"
          },
          {
              "data": "shirt-away"
          },
          {
              "data": "badge-away"
          }
      ]
  });
  
  $('.event-table 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() ).show();
          tr.addClass('shown');
      }
  } );
  
  function format ( ) {
  // `d` is the original data object for the row
  return '&lt;table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;"&gt;'+
      '&lt;tr&gt;'+
      '&lt;td&gt;Full name:&lt;/td&gt;'+
      '&lt;td&gt;Something&lt;/td&gt;'+
      '&lt;/tr&gt;'+
      '&lt;tr&gt;'+
      '&lt;td&gt;Extension number:&lt;/td&gt;'+
      '&lt;td&gt;Something&lt;/td&gt;'+
      '&lt;/tr&gt;'+
      '&lt;tr&gt;'+
      '&lt;td&gt;Extra info:&lt;/td&gt;'+
      '&lt;td&gt;And any further details here (images etc)...&lt;/td&gt;'+
      '&lt;/tr&gt;'+
      '&lt;/table&gt;';
  }
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I did not specify that I had multiple such tables on the same page. Only one was visible. The child rows are actually added but on the wrong table. 
  This <a href="https://jsfiddle.net/u4nze1tf/" rel="nofollow">fiddle</a> shows the behaviour
  How can I know what table to add the rows to?</p>