I am using datatables and I am trying to add 'show/hide columns dynamically', from https://datatables.net/examples/api/show_hide.html

In my web page I already have the code this bit of code:

<script>
$(document).ready(function(){
var table = $('#example').DataTable();
   //DataTable custom search field
    $('#custom-filter').keyup( function() {
      table.search( this.value ).draw();
    } );
});
</script>

and now I want to add

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "scrollY": "200px",
        "paging": false
    } );
 
    $('a.toggle-vis').on( 'click', function (e) {
        e.preventDefault();
 
        // Get the column API object
        var column = table.column( $(this).attr('data-column') );
 
        // Toggle the visibility
        column.visible( ! column.visible() );
    } );
} );

But I get the error :

DataTables warning: table id=example - Cannot reinitialise DataTable.

I've tried to combine the two into one, but keep getting the error. Any help would be appreciated.