Сокрытие столбцов таблицы и чекбокс

215

26 декабря 2017, 16:14

Делаю сокрытие столбцов таблицы по чекбоксам. JS код взял отсюда.

Проблема в следующем. Столбцы скрываются, но чекбоксы не помечаются выбранными. Если убрать из кода e.preventDefault();, то тогда с чекбоксами все в порядке, но столбцы не скрываются. При клике по чекбоксу не добавляются никакие классы, поэтому я не понимаю, что делать.

Как это решить?

    var table = $('#accounts').dataTable(); 
 
    $('label.toggle-vis').on('click', function (e) { 
        e.preventDefault(); 
       // Get the column API object 
        var column = table.api().column($(this).attr('data-column')); 
        // Toggle the visibility 
        column.visible(!column.visible()); 
    });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> 
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> 
 
<label class="custom-control custom-checkbox toggle-vis" data-column="0"> 
    <input type="checkbox" class="custom-control-input"> 
    <span class="custom-control-indicator"></span> 
    <span class="custom-control-description">Id</span> 
</label> 
 
<label class="custom-control custom-checkbox toggle-vis" data-column="1"> 
    <input type="checkbox" class="custom-control-input"> 
    <span class="custom-control-indicator"></span> 
    <span class="custom-control-description">Name</span> 
</label> 
 
<table id="accounts" class="table"> 
  <thead> 
    <tr> 
        <th>Id</th> 
        <th>Name</th> 
     </tr> 
   </thead> 
      <tbody> 
        <tr> 
          <td>1</td><td>Jack</td> 
        </tr> 
        <tr> 
          <td>2</td><td>Peter</td> 
        </tr> 
      </tbody> 
    </table>

Answer 1

$('label.toggle-vis input').on('click', function (e) {
   // Get the column API object
   var column = table.api().column($(this).closest("label").data('column'));
   // Toggle the visibility
   column.visible(!column.visible());
});