Bootstrap 和 Datatables 折叠行

Posted 2023-05-09

【中文标题】Bootstrap 和 Datatables 折叠行

【英文标题】：Bootstrap and Datatables Collapse row

【发布时间】：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

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

谢谢

【参考方案1】：

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

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