Question

我正在使用数据表，并使用＆＃39; columnsToggle＆＃39;自动生成列切换按钮。按钮选项。我有一列（第一列）仅用于打开/关闭子行（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",
  }
]
} );

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

Answer 1

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

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

请参阅this jsFiddle以获取代码和演示。

Answer 2

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

write.table

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>

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

请参阅文档：https://datatables.net/reference/button/columnsToggle

DataTables插件：columnsToggle忽略特定列

3 个答案: