DataTables - не работает при добавлении colspan для последнего столбца

У меня проблема с использованием DataTables. Когда я добавляю colspan для последнего столбца, плагин datatable не будет применяться к таблице. Если я удаляю colspan для последнего и помещаю его в любой другой столбец, он работает.

Например -

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="stu_data_table">
   <thead>
      <tr>    
        <th>&nbsp;</th>
        <th colspan="2">&nbsp;</th>
        <th colspan="2">&nbsp;</th>
      </tr>
   </thead>
   <tbody>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
   </tbody>
</table>

$('#stu_data_table').dataTable({
});

Любое решение для этого?

Ответ 1

DataTables не поддерживает colspans, как вы их используете. Вместо этого следуйте их сложному примеру заголовка.

При использовании таблиц для отображения данных вы часто хотите отображать столбца в группах. DataTables полностью поддерживает colspan и rowspans в заголовке, назначая требуемые слушатели сортировки для элемент TH, подходящий для этой колонки. Каждый столбец должен иметь один TH ячейка (и только одна), которая уникальна для слушателей добавлено. Пример, показанный ниже, содержит информацию о главном браузере сгруппированы вместе.

<thead>
    <tr>
        <th rowspan="2">Rendering engine</th>
        <th rowspan="2">Browser</th>
        <th colspan="3">Details</th>
    </tr>
    <tr>
        <th>Platform(s)</th>
        <th>Engine version</th>
        <th>CSS grade</th>
    </tr>
</thead>

Ваш эквивалент будет выглядеть примерно так:

<thead>
  <tr>    
    <th rowspan="2">&nbsp;</th> <!-- column 1 -->

    <th colspan="2">&nbsp;</th> <!-- column 2&3 -->
    <th colspan="2">&nbsp;</th> <!-- column 4&5 -->
  </tr>
 <tr>
    <th>&nbsp;</th> <!-- column 2 -->
    <th>&nbsp;</th> <!-- column 3 -->

    <th>&nbsp;</th> <!-- column 4 -->
    <th>&nbsp;</th> <!-- column 5 -->
 </tr>
</thead>

Ответ 2

dataTable не поддерживает colspan или rowspan.

Если вы используете colspan, dataTable не будет понимать количество столбцов/вычисление, возвращая undefined и выдавая ошибку в этом случае.

Итак, что нам нужно сделать, сообщает dataTable, что в случае, если он не получит ожидаемого результата, что должно быть альтернативным.

Для этого мы будем использовать свойство defaultContent и, разумеется, раскрыть цели/затронутые столбцы.

Например: в таблице с 3 td, если мы используем td colspan = "2" , нам нужно будет установить значения по умолчанию для остальных 2 (потому что один уже существует - и он первый).

код:

"aoColumnDefs": [{
  "aTargets": [2,3],
  "defaultContent": "",
}]

Ответ 3

Альтернативным методом является использование Child rows. Это в конечном итоге добавит строку ниже родительской, как показано на рисунке ниже

код

var table =jQuery('#bwki_sites_display').DataTable( {
    'pageLength': 10,
    'lengthMenu': [ 10, 20, 50, 100, 200 ],
    'order': [[ 0, 'desc' ]],

    }
);
table.rows().every( function () {
    var row = table.row( $(this));
    html = '<i class="fa fa-plus"></i>Colspan will come here';              
    row.child(html).show();
    $(this).addClass('shown');                                              
});

Ответ 4

Вместо того, чтобы использовать пример сложного заголовка, вы можете добавить скрытый столбец в конец tr, это, на мой взгляд, смешно, но проще и короче:

<thead>
  <tr>    
    <th>&nbsp;</th> <!-- column 1 -->
    <th colspan="2">&nbsp;</th> <!-- column 2&3 -->
    <th colspan="2">&nbsp;</th> <!-- column 4&5 -->

    <!-- hidden column 6 for proper DataTable applying -->
    <th style="display: none"></th> 
  </tr>
</thead>

<tbody>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>

    <!-- hidden column 6 for proper DataTable applying -->
    <td style="display: none"></td>
  </tr>
</tbody>