how to hide columns in colvis in the html

ty105

i have a table i am displaying

<table id="mytable">
<tr>
   <th>1</th>
   <th>2</th>
   <th>3</th>
   <th>4</th>
   <th>5</th>
</tr>

<tr>
   <td>info</td>
   <td>info</td>
   <td>info</td>
   <td>info</td>
   <td>info</td>
</tr>

<tr>
   <td>info</td>
   <td>info</td>
   <td>info</td>
   <td>info</td>
   <td>info</td>
</tr>
</table>

<script>
$(document).ready(function() {
    $('#mytable').DataTable( {
        dom: 'C<"clear">lfrtip'
    } );
} );
</script>

I want only colums 1-3 displayed by default, but i want the end user to have the option to display 4 and 5.
Thank you for the help

Ashbjorn

Hi ty105,

You can use either columns or columnDefs to achieve this.

Hide the first column with columnDefs:

$('#example').dataTable( {
  "columnDefs": [
    { "visible": false, "targets": 0 }
  ]
} );

Hide the first column with columns:

$('#example').dataTable( {
  "columns": [
    { "visible": false },
    null,
    null,
    null,
    null
  ] } );
} );

ColVis will pick these settings up during initialization of the column menu.

ty105

awesome thank you!

ty105

Ashbjorn,

maybe you will know my next problem?

i have an empty column header

<th></th>
<th>id</th>

and i want to give this column a name in the colvis show/hide columns dropdown. while keeping the header blank. {"title": 'text'} doesnt work unfortunately, because the header is no longer blank.

thank you so much for the help

Ashbjorn

No problem ty105,

I don't think this can be done "nicely" in the current version of ColVis since it creates clones of the table headers. So any trick you apply to the contents of that header will also reflect on the column menu.

Things like changing CSS to hide it, using jQuery to clear the contents, or even changing the opacity do not seem to provide the desired result.

However, you can "hack" your way by overriding the CSS of the Colvis Menu to make it appear again:

In your header add this:

<th><span class="hidden">Custom</span></th>

Then add these CSS rules:

span.hidden { display: none }

.ColVis_collection span.hidden { display: block }

This should make the table header cell appear empty but the ColVis menu should show the text!

Hope this helps,

ty105

i found a cleaner way to do it

"ColVis": {
"label": function ( index, title, th ) {
                    if (index == 0) {
                        return "Left Buttons";
                    }
                    else return title;
                }
}

just put in whatever indexes you want. in case you wanted to use it, or anyone else

Ashbjorn

Nice one! Will update my snippets =]