DataTableの子ローが表示されない

Question

DataTableの子ローの機能を使用しようとしましたが、何か間違ったことをしています。 （私はDataTablesを初めて使っています） 静的な子行を追加しようとしていますが、それは動作している（AJAXなし）だけです。 最初の列をクリックすると、「表示された」クラスが行に追加されますが、子行は追加されません。

また、エラーはスローされません。

私はhereの例に従って、AJAXデータを削除しました。 私の例では（アイコンをクリックしてそのリンクからテーブルを表示しても）意味がないことは分かっていますが、ちょっとしたステップを進めたいだけです。

これは私が今のところ持っているものである：私は私が持っていたことを指定しなかった

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

：

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を同じページに複数のそのようなテーブル。 1つしか見えませんでした。子行は実際に追加されますが、間違った表に追加されます。 これはの動作を示します 行を追加するテーブルを知るにはどうすればよいですか？

Answer 1

DataTablesによって作成されたテーブルオブジェクトを参照しているようです。しかし、同じ呼び出しで複数のテーブルを初期化した場合、テーブルオブジェクトはそれらのテーブルの1つを参照するだけです（予測できない結果を伴います）。あなたの最善の策は、テーブルデータ内のそれらのテーブルオブジェクトのそれぞれに参照を格納することです。

$(.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>'; 
} 

例フィドル：

はそうのような初期化部分書き換え

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