CODEWITHSUNDEEP
jquerydatatables
Colleen McGuckin
Colleen McGuckin

Reputation: 33

DataTables Plug-in: columnsToggle ignore specific columns

I am working with datatables and have column toggle buttons automatically generated using 'columnsToggle' option for buttons. I have one column (the first column) that is only used to open/close a child row (class=details-control), and don't want to be able to toggle this column on and off. I don't want it to show up as a button at all, I want the first button to correspond to the second row. How can I accomplish this? This is my datatables initialization: 

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",
  }
]
} );

Any help would be great. I've been scouring the internet trying to become a datatables ninja (to no avail so far). Thanks in advance!

Upvotes: 1

Views: 820

Answers (3)

user3117129
user3117129

Reputation: 1

$(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>

And just insert the class "toggle" in the column header:

See the doc : https://datatables.net/reference/button/columnsToggle

Upvotes: 0

Gyrocode.com
Gyrocode.com

Reputation: 58860

You can use the syntax below to specify what columns (by using zero-based column indexes) you want to be toggleable:

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

See this jsFiddle for code and demonstration.

Upvotes: 3

Colleen McGuckin
Colleen McGuckin

Reputation: 33

I also found this as a way to define which columns to exclude, instead of include:

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

Upvotes: 2

Related Questions