Как показать / скрыть столбцы в сложном заголовке таблицы данных

Question

У меня возникли проблемы при работе с таблицами данных в jQuery.У меня есть таблица с динамическим генерированием заголовка столбца (которая также определяет значение colspan) и фактический сложный текст заголовка.

Затем я заполняю свою таблицу данных данными, которые я получаю из API.

Проблема: После загрузки таблицы данных я использовал опцию Button показать / скрыть столбцы, но проблема в том, что я всегда получаю столбцы, которые не находятся в colspan или имеют ровно один столбец.

Мне нужно решение, в котором я мог бы показать / скрыть свои столбцы на основе моего сложного сгенерированного заголовка.

Пример структуры:

<table>
 <thead>
  <tr>
   <th>Main Header</th>
   <th colspan="2">Main Header 1</th>
   <th colspan="5">Main Header 2</th>
   <th colspan="3">Main Header 3</th>
  </tr>
  <tr>
   <td>Sub Header</td>
   <td>Sub Header 1</td>
   <td>Sub Header 2</td>
  </tr>
</thead>
<!-- DATA FOR TABLE GOES HERE -->
</table>

Так что в основном мой вопросявляется то, что я хочу показать / скрыть столбец на основе моего основного заголовка, но когда я инициализирую функцию отображения / скрытия таблицы данных с помощью кнопок, он всегда ловит подзаголовки и только те основные заголовки, чей colspan равен 0.

Рабочая скрипка: https://jsfiddle.net/k0afsmzt/

Я пытаюсь показать / скрыть столбцы, основанные на главных заголовках, но плагин таблиц данных показывает только вспомогательные заголовки, когда вы нажимаете кнопку видимости столбцов.

Answer 1

Вы пытаетесь показать / скрыть столбцы , но не заголовки .
(Полагаю, потому что, как бы пользователь мог показать столбцы, если нет?)

... не хватает примеров для справки ...

Я согласен. Поэтому я сделал что-то, надеюсь, вам понравится.

Поскольку я обнаружил, что игра с column (). Visible () в DataTable просто не рендерит "скрытые" столбцы , включая заголовки , и это вызывает новые проблемы, это решает ... Я нашел альтернативный способ достичь чего-то близкого к вашим потребностям.

В демонстрации ниже я играл со свойством CSS visibility . Дополнительным преимуществом является то, что таблица постоянно сохраняет свою первоначальную ширину.

Теперь на табличном дро, инициированном разбиением на страницы или поиском ... Скрытие столбцов может не сохраняться постоянно ... Я оставляю вас таким забавным, чтобы проверить это с некоторыми реальными данными сверх более одной страницы таблицы данных.

Я думаю, это хороший стартер. Я запрограммировал намного больше, чем должен был ... Поиграйте с ним и настройте его на свой вкус. Если возникнет еще какая-то проблема, опубликуйте еще один вопрос , включая то, что вы пытались исправить .

Также на CodePen .

Пожалуйста, запустите приведенный ниже фрагмент в режиме полная страница .

$(document).ready(function() {
  var myTable = $('#mytable').DataTable({
    dom: 'Bfrtip',
    buttons: [
      'colvis'
    ],
    "drawCallback": function( settings ) {
      $("#mytable thead th").show();
    } 
  });

  $('#mytable').on("click","th",function(){

    console.clear();
    
    // Get the TH column "from"
    var colFrom = parseInt($(this).data("col_from"));
    //console.log(colFrom);

    // Get the TH column "to"
    var colTo = parseInt($(this).data("col_to"));
    //console.log(colTo);

    // Toggle the columns under the TH
    for(i=colFrom;i<colTo+1;i++){
      
      //myTable.column( i ).visible( !myTable.column( i ).visible() );
      $("#mytable tbody tr").each(function(){
        var TD = $(this).find("td").eq(i);
        
        // Toggle visibility
        var toggleCol = (TD.css("visibility")=="visible") ? "hidden" : "visible";
        console.log("TOGGLING COL# "+i+" to "+toggleCol);
        TD.css({"visibility":toggleCol})
      });
    }
  });
});

table{
  border:0px !important;
}
th,td{
  border:1px solid black !important;
}
thead th{
  cursor:pointer;
}

<!--link rel="stylesheet" type="text/css" href="/media/css/site-examples.css?_=19472395a2969da78c8a4c707e72123a"-->

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.colVis.min.js"></script>

<!-- Main Table Structure -->
<table id="mytable">
  <thead>
    <tr>
      <th data-col_from="0" data-col_to="0">Main Header</th>
      <th colspan="2" data-col_from="1" data-col_to="2">Main Header 1</th>
      <th colspan="4" data-col_from="3" data-col_to="6">Main Header 2</th>
    </tr>
    <tr>
      <td>Sub Header 0</td>
      <td>Sub Header 1</td>
      <td>Sub Header 2</td>
      <td>Sub Header 3</td>
      <td>Sub Header 4</td>
      <td>Sub Header 5</td>
      <td>Sub Header 6</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Sample Data 0</td>
      <td>Sample Data 1</td>
      <td>Sample Data 2</td>
      <td>Sample Data 3</td>
      <td>Sample Data 4</td>
      <td>Sample Data 5</td>
      <td>Sample Data 6</td>
    </tr>
  </tbody>
  <!-- DATA FOR TABLE GOES HERE -->
</table>