Сгруппировать строки при применении order и выполняя поиск в rowsGroup dataTable jquery js

Рейтинг: 0Ответов: 1Опубликовано: 16.05.2023

есть таблица (на самом деле она побольше, оставила смысловую часть)

<table id="table_obekt">
  <thead>
    <tr>
      <th class="centertext" rowspan="2">Колонка 1</th>
      <th class="centertext" colspan="2">Объединяющее название</th>
      <th class="centertext" rowspan="2">Колонка 4</th>
    </tr>
    <tr>
      <th class="centertext">Колонка 2</th>
      <th class="centertext">Колонка 3</th>
    </tr>
  </thead>
  <tbody>
  {% for data in dataDjango %}
    {% with rowspan=data.child_data.count %}
      <tr>
        <td rowspan={{rowspan|default:1}} style="display: table-cell">{{data.colonka1}}</td>
        {% for child_data_one in data.child_data %}
          {% if forloop.first %}
            <td>{{child_data_one.colonka2}}</td>
            <td>{{child_data_one.colonka3}}</td>
            <td rowspan={{rowspan|default:1}} style="display: table-cell">{{data.colonka4}}</td>
            </tr>
          {% else %}
            <tr>
              <td style="display: none">{{data.colonka1}}</td>
              <td>{{child_data_one.colonka2}}</td>
              <td>{{child_data_one.colonka3}}</td>
              <td style="display: none">{{data.colonka4}}</td>
            </tr>
          {% endif %}
        {% endfor %}
    {% endwith %}
  {% endfor %}    
  </tbody>
</table>
<script>
var oTable = $('#table_obekt').dataTable({
  rowsGroup: [0,3],
  paging: false,
  bLengthChange: false, // не отображаем выбор количества отображаемых элементов
  order: [[ 0, 'asc' ]], // сортируем по первому столбцу
  info: false,
});
</script>

Таблица при загрузке отображается правильно, есть иконки для сортировки asc decs. Сортировка, где в заглавие таблицы применяется rowspan, проходит правильно, но где название колонок находится под colspan, там разрывает изначальную группировку строк таблицы. Таблица ломается child_data_one.colonka2 становится первой колонкой, child_data_one.colonka3 второй колонкой, так как остальное было скрыто. При поиске также разрывает и остаётся такая же часть.

Как правильно сделать так, чтобы группу строк не разрывало при сортировки по второй или третьей колонке, и чтобы не пропадала вся группа при поиске?

Ответы

▲ 0Принят

Ошибка была найдена, не правильно был подключен src в script. Также не нужен нигде rowspan, style="display: none", style="display: table-cell".

Style может только понадобиться, если у вас в td кнопки, их rowsgroup не объединит, даже если они полностью идентичны по всем атрибутам и значениям. Можно оставить видимой только верхнюю, а остальные скрыть style="display: none". А при использовании поиска по таблице от DataTables, сделать все кнопки снова видимыми.