Проблемы с данными при группировке всех столбцов в 1 строке?

Question

У меня есть таблица и я создал 1 строку, используя colspan, следующую строку с моими данными. Пример в codepen

Но библиотека datatables не работает, и у меня есть некоторые проблемы в консоли:

Uncaught TypeError: Невозможно установить свойство '_DT_CellIndex' изundefined
в Ха (jquery.dataTables.min.js: 24)
в O (jquery.dataTables.min.js: 16)

Код:

$(document).ready(function() {
  var table = $('#example').DataTable({});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td colspan="6">TESTTEST</td>
    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
  </tbody>
</table>

Возможно, эта функция не поддерживается в Datatables, или это некоторые ошибки.Или, может быть, кто-то может помочь мне решить эту проблему.Это будет здорово.Или небольшой совет.

Answer 1

Colspan не поддерживается в Datatables.Однако вы можете использовать этот обходной путь:

<tr>
  <td colspan="6">TESTTEST</td>
  <td style="display: none;"></td>
  <td style="display: none;"></td>
  <td style="display: none;"></td>
  <td style="display: none;"></td>
  <td style="display: none;"></td>
</tr>