DataTables Plug-in: columnsToggle игнорировать определенные столбцы

Question

Я работаю с datatables и имеет кнопки переключения столбцов, автоматически генерируемые с помощью опции «columnsToggle» для кнопок. У меня есть один столбец (первый столбец), который используется только для открытия/закрытия дочерней строки (class = details-control) и не хочет включать и выключать этот столбец. Я не хочу, чтобы он отображался как кнопка вообще, я хочу, чтобы первая кнопка соответствовала второй строке. Как я могу это сделать? Это инициализация моих данных:

var myTable = $('#myTable').DataTable({ 
dom: 'Brtip', 
colReorder: true, 
buttons: [ 
    'columnsToggle' 
], 
"columnDefs": [ 
    { 
    "targets": [0], 
    "className": 'details-control' 
    }, 
    { 
    "targets": [1], 
    "data": "title", 
    }, 
    { 
    "targets": [2], 
    "data": "genre" 
    }, 
    { 
    "targets": [3], 
    "data": "studio" 
    }, 
    { 
    "targets": [4], 
    "data": "format", 
    } 
] 
}); 

Любая помощь будет замечательной. Я прочесываю интернет, пытаясь стать ниндзя datatables (пока ничего не получилось). Заранее спасибо!

Answer 1

Вы можете использовать синтаксис ниже, чтобы указать, какие столбцы (с использованием индексов столбцов с нуля), вы хотите быть переключаемой:

buttons: [{ 
    extend: 'columnsToggle', 
    columns: [1,2,3,4,5] 
}], 

См this jsFiddle для кода и демонстрации.

Answer 2

Я также нашел это как способ, чтобы определить, какие столбцы, чтобы исключить, а не включать в себя:

buttons: [ 
    { 
     extend: 'columnsToggle', 
     columns: ':gt(0)' 
    } 
], 

Answer 3

$(document).ready(function() { 
 
    var table = $('#example').DataTable({ 
 
     dom: 'Brtip', 
 
     buttons: [{ 
 
      extend: 'columnsToggle', 
 
      columns: ".toggle" 
 
     }] 
 
    }); 
 
});

<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id="example" class="display" cellspacing="0" width="100%"> 
 
    <thead> 
 
     <tr> 
 
      <th class="toggle">Name</th> 
 
      <th class="toggle">Position</th> 
 
      <th>Office</th> 
 
      <th class="toggle">Age</th> 
 
      <th>Start date</th> 
 
      <th>Salary</th> 
 
     </tr> 
 
    </thead> 
 
    <tfoot> 
 
     <tr> 
 
      <th>Name</th> 
 
      <th>Position</th> 
 
      <th>Office</th> 
 
      <th>Age</th> 
 
      <th>Start date</th> 
 
      <th>Salary</th> 
 
     </tr> 
 
    </tfoot> 
 
    <tbody> 
 
     <tr> 
 
      <td>Tiger Nixon</td> 
 
      <td>System Architect</td> 
 
      <td>Edinburgh</td> 
 
      <td>61</td> 
 
      <td>2011/04/25</td> 
 
      <td>$320,800</td> 
 
     </tr> 
 
     
 
     <tr> 
 
      <td>Timothy Mooney</td> 
 
      <td>Office Manager</td> 
 
      <td>London</td> 
 
      <td>37</td> 
 
      <td>2008/12/11</td> 
 
      <td>$136,200</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Jackson Bradshaw</td> 
 
      <td>Director</td> 
 
      <td>New York</td> 
 
      <td>65</td> 
 
      <td>2008/09/26</td> 
 
      <td>$645,750</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Olivia Liang</td> 
 
      <td>Support Engineer</td> 
 
      <td>Singapore</td> 
 
      <td>64</td> 
 
      <td>2011/02/03</td> 
 
      <td>$234,500</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Bruno Nash</td> 
 
      <td>Software Engineer</td> 
 
      <td>London</td> 
 
      <td>38</td> 
 
      <td>2011/05/03</td> 
 
      <td>$163,500</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Sakura Yamamoto</td> 
 
      <td>Support Engineer</td> 
 
      <td>Tokyo</td> 
 
      <td>37</td> 
 
      <td>2009/08/19</td> 
 
      <td>$139,575</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Zenaida Frank</td> 
 
      <td>Software Engineer</td> 
 
      <td>New York</td> 
 
      <td>63</td> 
 
      <td>2010/01/04</td> 
 
      <td>$125,250</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Zorita Serrano</td> 
 
      <td>Software Engineer</td> 
 
      <td>San Francisco</td> 
 
      <td>56</td> 
 
      <td>2012/06/01</td> 
 
      <td>$115,000</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Jennifer Acosta</td> 
 
      <td>Junior Javascript Developer</td> 
 
      <td>Edinburgh</td> 
 
      <td>43</td> 
 
      <td>2013/02/01</td> 
 
      <td>$75,650</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Cara Stevens</td> 
 
      <td>Sales Assistant</td> 
 
      <td>New York</td> 
 
      <td>46</td> 
 
      <td>2011/12/06</td> 
 
      <td>$145,600</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Hermione Butler</td> 
 
      <td>Regional Director</td> 
 
      <td>London</td> 
 
      <td>47</td> 
 
      <td>2011/03/21</td> 
 
      <td>$356,250</td> 
 
     </tr>   
 
    </tbody> 
 
</table>

И просто вставить класс «тумблер» в заголовке столбца :

См. Документ: https://datatables.net/reference/button/columnsToggle