Visibility of Datatables Column

Question

I’m using the DataTables for display and export of my tables, one of the types of datatables I use and this one:

https://datatables.net/extensions/colreorder/examples/integration/colvis.html

I wonder if it is possible to define at startup which columns should be omitted and then optionally display them through the button?

Example: I have a table with the following columns

Name,Position,Office,Age,Start date,Salary

And I wish only the columns would appear Name,Position,Salary, and the others only appeared when I clicked the button.

Answer 1

Good in research and with the tip of Caique Romero, I managed to solve the problem.

    $(document).ready( function () {
        $('#table').DataTable( {
            "dom": 'Bfrtip',
            "buttons": [
                'copy', 'csv', 'excel', 'pdf',  'print', 'colvis' 
            ],
            "columnDefs": [
                {
                    "targets": [ 0 ],
                    "visible": false,
                }
            ],
        } );
        
    } );

then my script got like this with the fields that I want to export, I added the columnDefs to hide certain column of the table the targets defines which columns I want to hide from the table always starting from 0, being the cult with Colvis I can display it again.

Answer 2

Just set the column(s) you want with "visible": false, inside columnDefs:

• Hidden Columns
• Column visibility Integration

$(document).ready(function() {
    var table = $('#example').DataTable( {
        dom: 'Bfrtip',
        colReorder: true,
        "columnDefs": [
            {
                "targets": [ 2 ], //Índice do vetor representa a 3º coluna
                "visible": false,
                "searchable": false
            },
            {
                "targets": [ 3 ],
                "visible": false,
                "searchable": false
            },
            {
                "targets": [ 4 ],
                "visible": false,
                "searchable": false
            }
        ],
        buttons: [
            'colvis'
        ]
    });
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<script src="https://cdn.datatables.net/colreorder/1.5.1/js/dataTables.colReorder.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.colVis.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/colreorder/1.5.1/css/colReorder.dataTables.min.css">

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
  </thead>
  <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>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
    </tr>
  </tbody>
</table>