Как использовать rowspan и colspan в tbody, используя datatable.js?
Всякий раз, когда я использую <td colspan="x"></td>
, я получаю следующую ошибку:
Uncaught TypeError: невозможно установить свойство '_DT_CellIndex' из undefined (...)
Demo
$("table").DataTable({});
<link href="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/jquery.dataTables.min.css'; return false;" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<table style="width:50%;">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td colspan="2">3 4</td>
<td colspan="3">4 5 6</td>
</tr>
</tbody>
</table>
Ответы
Ответ 1
Вы можете взломать отсутствие поддержки colspan, добавив "невидимую" ячейку для каждой удаленной ячейки:
<tr>
<td colspan="3">Wide column</td>
<td style="display: none;"></td>
<td style="display: none;"></td>
</tr>
<tr>
<td>Normal column</td>
<td>Normal column</td>
<td>Normal column</td>
</tr>
Таблицы данных не жалуются, таблица выглядит нормально и сортировка (невидимые столбцы сортируются как пустая строка).
Я не пробовал это с помощью rowspan.
Ответ 2
Прямо сейчас, datatables не поддерживают rowspan или colspan для тела таблицы.
Ссылка
Но, возможное решение должно быть
Пример таблицы скрытых строк DataTables
Надеюсь, что это сработает.
Ответ 3
См. ссылку ниже.
fnFakeRowspan
Также отсылайте сюда плагин.
плагин fnFakeRowspan
Надеюсь, это поможет вам
Ответ 4
Я не знаю, в какой момент, но я думаю, что fnFakeRowspan не поддерживает текущую версию DataTable.
В качестве альтернативы, выберете RowsGroup плагин.
Обнаружено, что это довольно легко реализовать и хорошо работает.
Поиск работает отлично, заказ не делает.
Отметьте здесь для реализации.