數據表復選框切換列

Question

我有一個龐大的數據表，其中包含太多列。 我已經過濾了其中一些

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

} );

我想添加復選框以說明可以添加或刪除的列。 我嘗試了這個Perl代碼

$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>';

我的復選框正確添加或刪除了列，但它們始終為空！ 我希望檢查列是否可見，如果隱藏則取消檢查。

我希望我很清楚。 我的英語不太流利。

Answer 1

我終於明白了

       e.preventDefault();

卡住我的復選框，我復制粘貼了一些使用它的代碼，但就我而言，這是不需要的。 我忘了我的HTML中checked =“ checked”

所以最后我使用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>';

和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() );

} );
   } );

它工作正常，我可以看到默認情況下隱藏了哪些列，並且可以通過復選框添加或刪除列...

抱歉，無法識別，但是我認為這段代碼可能有用。