Customize datatable

Question

I am working on a data table at the moment and I need to customize some of the data table features which are provided by the template. I am trying to allocate column visibility feature to the data table along with the all the columns but by default some of the fields should be on the data table.

Ex: Assume I have 5 columns [name, address, age, email , phone]. But by default data table should display [name, email, phone] fields only. But column visibility should display all the 5 fields. I am not sure whether its possible of not. This is what i have done so far.

var table = $('#data-table').DataTable( {
        destroy: true,
        dom: 'lBfrtip',
        "bFilter": true,
        "aLengthMenu": [[5, 10, 15, 20, 50, 100, -1], [5, 10, 15, 20, 50, 100, "All"]],
        "buttons": [
            {
                extend: 'copyHtml5',
                exportOptions: {
                    columns: [ 0, ':visible' ]
                }
            },
            {
                extend: 'excelHtml5',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'pdfHtml5',
                exportOptions: {
                    columns: [ 0, 1, 2, 5 ]
                }
            },
            {
                extend: 'colvis',
                postfixButtons: ['colvisRestore'],
            },
            'print'
        ]
    } );

And on the data table I have Action field including Edit and Delete Button. Is there any way i can remove action filter from column visibility, print and download button options?.

Hope I have explained it.If some one can guide me that would be great.

Thanks in advance.

Answer 1

In order to operate, colvis button requires the following:

Buttons' Column visibility button plug-in

Make sure you've reference colvis plug-in JS.

If you want few columns hide on load.

table.column(3).visible(false, false);

If you want only specific columns can be in set visible in colvis

{
extend: 'colvis',
columns: [0, 1, 2, 3], // These are columns can be set visibility, others will be always visible
}

sample demo

$(function() {
  var table = $('#example').DataTable({
    destroy: true,
    dom: 'lBfrtip',
    "bFilter": true,
    "aLengthMenu": [
      [5, 10, 15, 20, 50, 100, -1],
      [5, 10, 15, 20, 50, 100, "All"]
    ],
    "buttons": [{
        extend: 'copyHtml5',
        exportOptions: {
          columns: [0, ':visible']
        }
      }, {
        extend: 'excelHtml5',
        exportOptions: {
          columns: ':visible'
        }
      }, {
        extend: 'pdfHtml5',
        exportOptions: {
          columns: [0, 1, 2, 5]
        }
      }, {
        extend: 'colvis',
        columns: [0, 1, 2, 3], // These are columns can be set visiblity, others will be always visible
        postfixButtons: ['colvisRestore'],
      },
      'print'
    ]
  });

  // Initially this will hide 4th column
  table.column(3).visible(false, false);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/s/bs/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.10,b-1.1.0,b-flash-1.1.0,b-html5-1.1.0,b-print-1.1.0,fh-3.1.0,sc-1.4.0/datatables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.0/js/buttons.colVis.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/bs/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.10,b-1.1.0,b-flash-1.1.0,b-html5-1.1.0,b-print-1.1.0,fh-3.1.0,sc-1.4.0/datatables.min.css">

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">


<div class="container">
  <table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
    <thead>
      <tr>
        <th>name</th>
        <th>address</th>
        <th>age</th>
        <th>email </th>
        <th>phone</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Trident</td>
        <td>Internet Explorer 4.0</td>
        <td>Win 95+</td>
        <td> 4</td>
        <td>X</td>
      </tr>
      <tr>
        <td>Trident</td>
        <td>Internet Explorer 5.0</td>
        <td>Win 95+</td>
        <td>5</td>
        <td>C</td>
      </tr>
      <tr>
        <td>Trident</td>
        <td>Internet Explorer 5.5</td>
        <td>Win 95+</td>
        <td>5.5</td>
        <td>A</td>
      </tr>
      <tr>
        <td>Trident</td>
        <td>Internet Explorer 6</td>
        <td>Win 98+</td>
        <td>6</td>
        <td>A</td>
      </tr>
      <tr>
        <td>Trident</td>
        <td>Internet Explorer 7</td>
        <td>Win XP SP2+</td>
        <td>7</td>
        <td>A</td>
      </tr>
      <tr>
        <td>Trident</td>
        <td>AOL browser (AOL desktop)</td>
        <td>Win XP</td>
        <td>6</td>
        <td>A</td>
      </tr>
      <tr>
        <td>Gecko</td>
        <td>Firefox 1.0</td>
        <td>Win 98+ / OSX.2+</td>
        <td>1.7</td>
        <td>A</td>
      </tr>
      <tr>
        <td>Gecko</td>
        <td>Firefox 1.5</td>
        <td>Win 98+ / OSX.2+</td>
        <td>1.8</td>
        <td>A</td>
      </tr>
      <tr>
        <td>Gecko</td>
        <td>Firefox 2.0</td>
        <td>Win 98+ / OSX.2+</td>
        <td>1.8</td>
        <td>A</td>
      </tr>

      <tr>
        <td>Other browsers</td>
        <td>All others</td>
        <td>-</td>
        <td>-</td>
        <td>U</td>
      </tr>
    </tbody>
  </table>
</div>

Data table colvis reference