DataTable untergeordnete Zeilen werden nicht angezeigt

Question

Ich habe versucht, die Child-Zeilen-Feature von DataTables, aber ich mache etwas falsch, nicht sicher, was. (Ich bin neu in DataTables) Ich versuche, einige statische Kind Zeilen hinzufügen, nur um zu sehen, es funktioniert (kein AJAX). Wenn Sie auf die erste Spalte klicken, wird nur die Klasse 'showed' zur Zeile hinzugefügt, aber keine untergeordnete Zeile hinzugefügt.

Auch kein Fehler wird ausgelöst.

Ich folgte ihrem Beispiel von here, Entfernen der AJAX-Daten. Ich weiß, es macht keinen Sinn in meinem Beispiel (Klicken Sie auf ein Symbol und zeigt die Tabelle von diesem Link), aber ich möchte nur in kleinen Schritten gehen.

Dies ist, was ich jetzt habe:

HTML:

<table id='<%= league.name %>' class="event-table display responsive no-wrap"> 
      <thead> 
      <tr> 
      <th class="event-badge"></th> 
      <th class="event-shirt"></th> 
      <th class="event-team"></th> 
      <th class="event-dash"></th> 
      <th class="event-team"></th> 
      <th class="event-shirt"></th> 
      <th class="event-badge"></th> 
      </tr> 
      </thead> 
      <tbody> 
      <% events.each do |event| %> 
       <tr class="event-row"> 
       <td class="event-badge"><%= image_tag event.home_team.badge_url, :class => 'team-badge' %></td> 
       <td class="event-shirt"><%= image_tag event.home_team.shirt_url, :class => 'team-shirt' %></td> 
       <td class="event-team"><%= event.home_team.name %></td> 
       <td class="event-dash"> - </td> 
       <td class="event-team"><%= event.away_team.name %></td> 
       <td class="event-shirt"><%= image_tag event.away_team.shirt_url, :class => 'team-shirt' %></td> 
       <td class="event-badge"><%= image_tag event.away_team.badge_url, :class => 'team-badge' %></td> 
       </tr> 
      <% end %> 
      </tbody> 
</table> 

JS:

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 '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+ 
    '<tr>'+ 
    '<td>Full name:</td>'+ 
    '<td>Something</td>'+ 
    '</tr>'+ 
    '<tr>'+ 
    '<td>Extension number:</td>'+ 
    '<td>Something</td>'+ 
    '</tr>'+ 
    '<tr>'+ 
    '<td>Extra info:</td>'+ 
    '<td>And any further details here (images etc)...</td>'+ 
    '</tr>'+ 
    '</table>'; 
} 

UPDATE

angeben ich nicht, dass ich mehrere solcher Tabellen auf derselben Seite. Nur einer war sichtbar. Die untergeordneten Zeilen werden tatsächlich hinzugefügt, aber auf der falschen Tabelle. Diese fiddle zeigt das Verhalten Wie kann ich wissen, welche Tabelle die Zeilen hinzufügen?

Answer 1

Sie scheinen sich auf das von DataTables erstellte Tabellenobjekt zu beziehen. Wenn Sie jedoch mehrere Tabellen durch denselben Aufruf initialisiert haben, bezieht sich Ihr Tabellenobjekt nur auf eine dieser Tabellen (mit unvorhersehbaren Ergebnissen). Am besten speichern Sie eine Referenz für jedes dieser Tabellenobjekte in den Tabellendaten.

die Initialisierung Teil wie so Rewrite:

$(.event-table).each(function() { 
var table = $(this).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" 
     } 
    ] 
}); 
$(this).data("dataTableObject", table); 
}); 
$('.event-table tbody').on('click', 'td.details-control', function() { 
    var table = $(this).closest(".event-table").data("dataTableObject"); 
    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 '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+ 
    '<tr>'+ 
    '<td>Full name:</td>'+ 
    '<td>Something</td>'+ 
    '</tr>'+ 
    '<tr>'+ 
    '<td>Extension number:</td>'+ 
    '<td>Something</td>'+ 
    '</tr>'+ 
    '<tr>'+ 
    '<td>Extra info:</td>'+ 
    '<td>And any further details here (images etc)...</td>'+ 
    '</tr>'+ 
    '</table>'; 
} 

Beispiel Geige:

https://jsfiddle.net/u4nze1tf/1/