Bootstrap和Datatables折叠行

时间:2016-07-29 18:06:05

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

我遇到了崩溃新行和插件数据表的问题。

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 个答案:

答案 0 :(得分:1)

jQuery DataTables不支持colspan中的rowspantbody属性,这就是您收到错误的原因。

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