jquery, чтобы использовать флажок для переключения видимости столбца в DataTable

Question

У меня есть DataTable с 20 столбцами. Я хочу иметь флажки над таблицей, чтобы включить / выключить видимость столбца.

Найдена эта статья , в которой для этого использовались ссылки, но эти ссылки имеют жестко закодированные константы в элементах <a>, представляющих порядковый номер столбца. Я надеялся установить флажки, метка которых совпадает с элементами <th> в таблице, а затем функцию щелчка, чтобы найти соответствующий столбец и переключить видимость этого столбца.

var animals = $('#animalTable').DataTable({
    columns: [
        { data: 'Id', visible: false },
        { data: 'Cats' },
        { data: 'Dogs' }
    ]
});

<table id="animalTable">
  <thead>
    <tr>
      <th>Id</th>
      <th>Cats</th>
      <th>Dogs</th>
    </tr>
  </thead>
</table>

// a set of toggle checkboxes; one for each column
<input id="catscb" class="toggle-vis" type="checkbox" checked>
<label for="catscb">Cats</label>

<input id="dogscb" class="toggle-vis" type="checkbox" checked>
<label for="dogscb">Dogs</label>

Это код из статьи , который показал, как это сделать с помощью жестко закодированных индексов столбцов в атрибуте «столбец данных». Вместо этого я хотел бы использовать метку флажка, чтобы найти столбец.

$('input.toggle-vis').on( 'click', function (e) {

    // Get the column API object
    var column = table.column( $(this).attr('data-column') );
// 'data-column' above is the issue... hardcoded number in the <a> elements

    column.visible( ! column.visible() );
});

Я попытался сделать al oop до go для всех столбцов, но я не уверен, что это за this.data() внутри функции. Если это структура столбца, то как найти ее значение <th> и, если совпадение, как изменить видимость этого столбца?

// loop over all columns DataTable, even hidden ones (I hope that's what this does)
animals.columns().every( function () {
    var col = this.data();

    // compare this col's <th> to "Dogs" (since Dogs checkbox was
    // checked) and if a match, get the col index for Dogs column 
    // and toggle its visibility
});

Answer 1

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

$(document).ready(function() {
var animals = $('#animalTable').DataTable({
    columns: [
        { name: 'Id', visible: false },
        { name: 'Cats' },
        { name: 'Dogs' }
    ]
});
 
    $('input.toggle-vis').on( 'change', function (e) {
        e.preventDefault();
    var idv = $(this).attr('id');
    var namelab=$('label[class="' + idv + '"]').text();
    
    //var nicename = namelab+':name';
    var idx = animals.column(namelab+':name').index();
    //console.log(idx);
        // Get the column API object
        var column = animals.column( idx );
 
        // Toggle the visibility
        column.visible( ! column.visible() );
    } );
} );

<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<input id="catscb" class="toggle-vis" type="checkbox" checked>
<label class="catscb" for="catscb">Cats</label>

<input id="dogscb" class="toggle-vis" type="checkbox" checked>
<label class="dogscb" for="dogscb">Dogs</label>


<table id="animalTable">
  <thead>
    <tr>
      <th>Id</th>
      <th>Cats</th>
      <th>Dogs</th>
    </tr>
    
  </thead>
  <tbody>
    <tr>
                <td>1</td>
                <td>Cat 1</td>
                <td>Dog1</td>

            </tr>
            <tr>
                <td>2</td>
                <td>Cat2</td>
                <td>Dog2</td>

            </tr>
            <tr>
                <td>3</td>
                <td>Cat3</td>
                <td>DOg3</td>

            </tr>
            <tr>
                <td>4</td>
                <td>Cat4</td>
                <td>DOg4</td>

            </tr>
            <tr>
                <td>5</td>
                <td>Cat5</td>
                <td>DOg5</td>

            </tr>
  </tbody>
</table>

Я предпочитаю официальные рекомендации, поэтому, следуя упомянутой вами статье, которая лучше работает с помощью индекса по столбцам, я сделал вам эту скрипку: https://jsfiddle.net/1nwt5Lsx/