datatable checkbox toggle column

Question

I have a huge datatable with too many columns. I have filtered some of them like this

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

} );

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

$log .= '<div>  Toggle column: <table id="check1"><tr>';

my $j = 0;

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

    if ( $j eq 6 ) {
        $log .= "<tr>";
    }

    $j++;
}

$log .= '</table>   </div>';

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.

I hope I was clear; I am not fluent in English.

Answer 1

I ve finally understood

       e.preventDefault();

stuck my checkboxes, i copied pasted some code that used that, but in my case it was unwanted. and i forgot checked="checked" in my html

so finally i use the html :

    $log .= '<div>  Toggle column: <table id="check1"><tr>';
                    my $j=0;
                    foreach $toogle (@logvmware) 
                    {
                        $log .= '<td><input type="checkbox" name="checkbox'.$j.'" id="checkbox'.$j.'" class="toggle-vis" data-column="'.$j.'" checked="checked" /><FONT COLOR="#FF3333">'.$toogle.'</FONT></td>';
                        if ($j eq 6) {$log .= "<tr>";}
                        $j++;
                    }
                    $log .= '</table>   </div>';

and the javascript :

      $(document).ready(function() {
var table = $('#example').DataTable( {
    //stateSave: true
    "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
                 ], 
  /********************calcul des totaux*************/
         "footerCallback": function ( row, data, start, end, display ) {
        var api = this.api(), data;

        // Remove the formatting to get integer data for summation
        var intVal = function ( i ) {
            return typeof i === 'string' ?
                i.replace(/[\$,]/g, '')*1 :
                typeof i === 'number' ?
                    i : 0;
        };
        //update checkbox state for inform hidden column
        document.getElementById("checkbox4").checked = false;//hidden default column
        document.getElementById("checkbox8").checked = false;
        document.getElementById("checkbox7").checked = false;
        document.getElementById("checkbox6").checked = false;

        // Total over all pages
        totalcpu = api
            .column( 11 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Total over this page
        Totalcpu = api
            .column( 11, { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

         totalmemorysize = api
            .column( 12 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

          Totalmemorysize = api
            .column( 12, { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        totalmemoryused = api
            .column( 13 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

          Totalmemoryused = api
            .column( 13, { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Update footer
        $( api.column( 11 ).footer() ).html(
            'Number CPU <br>'+Totalcpu +' <br>('+ totalcpu +' total)'
        );
         $( api.column( 12 ).footer() ).html(
            'Memory Size <br>'+Totalmemorysize +' <br>('+ totalmemorysize +' total)'
        );
         $( api.column( 13 ).footer() ).html(
            'Memory Used <br>'+Totalmemoryused +' <br>('+ totalmemoryused +' total)'
        );  
    }
    /******************fin des totaux *******************/  
} 

);

$('input.toggle-vis').on( 'click', function (e) {
   // e.preventDefault(); //empêche la mise à jour des checkbox

    // Get the column API object
    var column = table.column( $(this).attr('data-column') );

    // Toggle the visibility
    column.visible( ! column.visible() );

} );
   } );

And it work fine, i can see which column are hidden by default, and i can add or delete column through my checkbox ...

Sorry for the identation, but i think this code can be usefull.