Установить предыдущую ширину столбца после переключения столбца в таблице данных

Question

В примере this вы можете увидеть, как переключать столбцы в jQuery DataTables. Как я могу установить предыдущую ширину столбца после переключения? Я использую Bootstrap и в my example, если вы переключаете столбец, столбец «Местоположение» всегда слишком узкий.

HTML

<div class="table-responsive"> 
    <h2>DataTables - resize columns</h2> 
    <div class="toggle_column_wrapper"> 
     <h4>Toggle column</h4> 
     <div class="btn-group" data-toggle="buttons"> 
      <label class="btn btn-primary active" data-column="1"> 
       <input type="checkbox" autoComplete="off" checked /> Customer Name 
      </label> 
      <label class="btn btn-primary active" data-column="2"> 
       <input type="checkbox" autoComplete="off" checked /> Location Type 
      </label> 
      <label class="btn btn-primary active" data-column="3"> 
       <input type="checkbox" autoComplete="off" checked /> Location 
      </label> 
     </div> 
    </div> 

    <table class="table table-striped table-bordered table-hover" cellSpacing="0" id="mytable"> 
     <thead> 
      <tr> 
       <th class="no-sort"><input type="checkbox" id="checkall"/></th> 
       <th>Customer Name</th> 
       <th>Location Type</th> 
       <th>Location</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td><input type="checkbox" className="checkthis" /></td> 
       <td>GE Capital Corporation</td><td>Main Office</td><td>901 Merritt 7 | Norwalk CT 06851 | USA</td> 
      </tr> 
      <tr> 
       <td><input type="checkbox" className="checkthis" /></td><td>GE Capital Corporation</td> 
       <td>Other Office</td><td>201 Merritt 7 | Norwalk CT 06851 | USA</td> 
      </tr> 
      <tr> 
       <td><input type="checkbox" className="checkthis" /></td> 
       <td>Telefonica UK</td><td>Main Office</td><td>260 Bath Rd | Slough SL1 4DX | UK</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

CSS

#mytable{ 
     width: 100%; 
    } 

    .table-responsive{ 
     width: 98%; 
     margin: 0 auto; 
    } 

    .table-responsive h2{ 
     margin-bottom: 20px; 
    } 

    .toggle_column_wrapper{ 
     margin-bottom: 20px; 
    } 

    .toggle_column_wrapper h4, .toggle_column_wrapper .btn-group{ 
     display: inline-block; 
    } 

    .toggle_column_wrapper h4{ 
     margin-right: 10px; 
    } 

    .btn-group .btn-primary.active:hover, 
    .btn-group .btn-primary{ 
     color: #333; 
     background-color: #e6e6e6; 
     border-color: #adadad; 
    } 

    .btn-group .btn-primary.active{ 
     color: #333; 
     background-color: #fff; 
     border-color: #ccc; 
    } 

Javascript

$(document).ready(function() { 
    var tableVar = $('#mytable').DataTable({ 
     "bDestroy": true,  
     "order": [], 
     "columnDefs": [{ 
      "targets": 'no-sort', 
      "orderable": false, 
     }], 
     "fnDrawCallback": function() { 
     } 
    }); 

    $('.toggle_column_wrapper label').on('click', function (e) { 
     e.preventDefault(); 
     // Get the column API object 
     var column = tableVar.column($(this).attr('data-column')); 
     // Toggle the visibility 
     column.visible(! column.visible()); 
    }); 
}); 

Answer 1

Если я понял ваш вопрос корр Кроме того, ваш DataTable теряет свою отзывчивость при переключении столбцов?

Попробуйте добавить:

"autoWidth" : false 

к вашему DataTable.

Документация может быть найдена here.

Пример here. Надеюсь, поможет.