Bootstrap and Datatables Collapse row

Question

I have a problem with collapse new row and plugin datatables.

HTML/Rails code:

  <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 code:

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

When i add collapse i have this error and datatables not rendering:

TypeError: nTd is undefined

Is it possible to add a line that can collapse and add datatables same time? If so, how do not have this error?

Thx

Gyrocode.com · Accepted Answer · 2016-08-01 14:35:10Z

1

jQuery DataTables doesn't support colspan and rowspan attributes in tbody, that's why you get that error.

I would suggest to look at Row details example which offers alternative way to show additional row details.

answered Aug 1, 2016 at 14:35

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Bootstrap and Datatables Collapse row

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related