2016-07-29 124 views
1

我有一個摺疊新行和插件數據表的問題。Bootstrap和Datatables摺疊行

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 ] } 
    ] 
}); 

當我添加崩潰我有這個錯誤和數據表不渲染:

TypeError: nTd is undefined 

這是可能的嗎?是否添加一行可以摺疊並同時添加數據表? 如果是這樣,怎麼沒有這個錯誤?

THX

回答

1

jQuery的數據表不支持tbodycolspanrowspan屬性,這就是爲什麼你得到這個錯誤。

我建議看看Row details example,它提供了替代方式來顯示額外的行詳細信息。