Using the Column visibility option correctly

hnorman138

I wanted an option to remove/drop columns on the client side, but I found the colvis button and that will work just fine for what I need. However, I've attached the link for the CSS and implemented the code into my existing datatable code but there is no column visibility button/option.

My code is for two different tables, that are alternating between being shown/hidden depending on the option from my select box.

Here is my code for the tables with the colvis option added, can you see what I'm doing wrong here?:

<script type="text/javascript"   src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="test/javascript"   src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.colVis.min.js"></script>
<script type="text/javascript">
(function($) {
$(document).ready(function() {
   $('#mytable').DataTable({
        dom: 'Bfrtip',
        buttons: [
            'colvis'
        ]
    });
   $('#mytableSurvey').DataTable({
        dom: 'Bfrtip',
        buttons: [
            'colvis'
        ]
    });
   $('.dataTable').wrap('<div class="dataTables_scroll" />');

   // select change event
   //$(document).on('change' , '#select-tables', function(){
    // var table = $(this).val();
     //$('#' + table +'_wrapper').show();
     //$('[id$="_wrapper"]').not('#' + table +'_wrapper').hide();
    //}).change();
    
     $(document).on('change' , '#select-tables', function(){
 var table = $(this).val();
 $('#' + table +'_wrapper').show();
 $('[id$="_wrapper"]').not('#' + table +'_wrapper').hide();
});
$("#select-tables").trigger("change");

});
}(jQuery));
</script>

kthorngren

Take a look at this example:
https://datatables.net/extensions/buttons/examples/column_visibility/simple.html

You also need to load dataTables.buttons.min.js and buttons.dataTables.min.css.

Kevin

hnorman138

Ok, my code is pulled from that example and I've included the CSS but I'll try loading the button plugin, thank you!