2016-07-29 17 views
1

新しい行とプラグインのデータテーブルを折りたたむのに問題があります。ブートストラップとデータテーブル行を折りたたみます

HTML/Railsのコード:

<table class="table table-bordered users-list"> 
<thead> 
<tr> 
    <th> 
    XXX 
    </th> 
    <th> 
    XXX 
    </th> 
    <th> 
    XXX 
    </th> 
    <th> 
    XXX 
    </th> 
    <th> 
    XXX 
    </th> 
    <th> 
    XXX 
    </th> 
    <th> 
    XXX 
    </th> 
    <th> 
    XXX 
    </th> 
</tr> 
</thead> 
<tbody> 
    <% @users.each do |u| %> 
    <tr data-toggle="collapse" data-target="#<%= u.id %>"> 
     <td> 
      <%= u.first_name %> 
     </td> 
     <td class="text-center"> 
      <%= u.last_name %> 
     </td> 
     <td class="text-center"> 
      <%= u.email %> 
     </td> 
     <td class="text-center"> 
      <%= u.provider %> 
     </td> 
     <td class="text-center"> 
      <%= u.device %> 
     </td> 
     <td class="text-center"> 
      <%= u.type %> 
     </td> 
     <td class="text-center"> 
      <%= u.messages.size %> 
     </td> 
     <td> 
      <%= link_to edit_user_path(u), class: 'btn btn-sm btn-default', title: 'Edit' do %> 
      <i class="fa fa-cog" aria-hidden="true"></i> 
      <% end %> 
      <%= link_to user_path(u), method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-sm btn-danger', title: 'Delete' do %> 
       <i class="fa fa-trash-o" title="Delete" aria-hidden="true"></i> 
      <% end %> 
     </td> 
     </tr> 
     <tr> 
     <td colspan="8" class="user-chart"> 
      <div id="<%= user.id %>" class="collapse"> 
      <%= u.chart %> 
      </div> 
     </td> 
     </tr> 
    <% end %> 
</tbody> 

JSコード:

$('.users-list').DataTable({ 
    language: { 
     search: '_INPUT_', 
     searchPlaceholder: 'Search users...' 
    }, 
    aoColumnDefs: [ 
     { bSortable: false, aTargets: [ 5 ] } 
    ] 
}); 

私は崩壊を追加すると、私はこのエラーとのDataTableがレンダリングいない:

TypeError: nTd is undefined 

それは可能ですか?同じ時間にデータテーブルを崩壊させたり追加したりする行を追加するには? もしそうなら、このエラーはどうですか?

Thxを

答えて

1

のjQueryのDataTableを使用すると、そのエラーを取得する理由です、tbodycolspanrowspan属性をサポートしていません。

Row details exampleを参照すると、追加の行の詳細が表示されます。

関連する問題