datatable checkbox toggle column
<p>I have a huge datatable with too many columns. I have filtered some of them like this</p>

<pre><code>    $(document).ready(function() {
var table = $('#example').DataTable( {
    "bJQueryUI": false,
    "bAutoWidth": false,
    "bDestroy": true,
  //  "bPaginate": false,
  //  "bInfo": false,
    "lengthMenu": [ [30, 40, 50, -1], [30, 40, 50, "All"] ],
"columnDefs": [
                   { "visible": false, "targets": [4] }, //OSversion
                   { "visible": false, "targets": [8] }, //VmVersions
                   { "visible": false, "targets": [7] }, //VMStates
                   { "visible": false, "targets": [6] }  //VMtoolsVersion
                 ], 
} );

$('input.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() );
} );

} );
</code></pre>

<p>I want to add checkboxes to say which columns can be added or removed. I tried this Perl code</p>

<pre><code>$log .= '&lt;div&gt;  Toggle column: &lt;table id="check1"&gt;&lt;tr&gt;';

my $j = 0;

foreach $toogle (@logvmware) {
    $log
            .= '&lt;td&gt;&lt;input type="checkbox" class="toggle-vis" data-column="'
            . $j
            . '"&gt;&lt;FONT COLOR="#FF3333"&gt;'
            . $toogle
            . '&lt;/FONT&gt;&lt;/td&gt;';

    if ( $j eq 6 ) {
        $log .= "&lt;tr&gt;";
    }

    $j++;
}

$log .= '&lt;/table&gt;   &lt;/div&gt;';
</code></pre>

<p>My checkboxes correctly add or remove the columns but they're always empty! I want them to be checked if the column is visible and unchecked if the column is hidden.</p>

<p>I hope I was clear; I am not fluent in English.</p>