Bootstrap 和 Datatables 折叠行答案

【问题标题】：Bootstrap and Datatables Collapse rowBootstrap 和 Datatables 折叠行
【发布时间】：2016-12-04 12:51:22
【问题描述】：

我在折叠新行和插件数据表时遇到问题。

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

是否可以添加可以同时折叠和添加数据表的行？如果有，怎么没有这个错误？

谢谢

【问题讨论】：

标签： jquery ruby-on-rails twitter-bootstrap datatables collapse

【解决方案1】：

jQuery DataTables 不支持tbody 中的colspan 和rowspan 属性，这就是您收到该错误的原因。

我建议查看Row details example，它提供了显示其他行详细信息的替代方式。

【讨论】：