DataTables 插件：columnsToggle 忽略特定列答案

【问题标题】：DataTables Plug-in: columnsToggle ignore specific columnsDataTables 插件：columnsToggle 忽略特定列
【发布时间】：2015-11-18 21:44:21
【问题描述】：

我正在使用数据表并使用按钮的“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",
  }
]
} );

任何帮助都会很棒。我一直在互联网上搜索试图成为数据表忍者（到目前为止无济于事）。提前致谢！

【问题讨论】：

标签： jquery datatables

【解决方案1】：

您可以使用下面的语法来指定您想要切换哪些列（通过使用从零开始的列索引）：

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

有关代码和演示，请参阅this jsFiddle。

【讨论】：

【解决方案2】：

我还发现这是一种定义要排除而不是包含列的方法：

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

【讨论】：

【解决方案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>

只需在列标题中插入“toggle”类：

查看文档：https://datatables.net/reference/button/columnsToggle

【讨论】：