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中检查=“已检查”

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

} );
   } );

它工作正常，我可以看到默认隐藏哪一列，我可以通过我的复选框添加或删除列...

很抱歉这个身份，但我认为这段代码很有用。

数据表复选框切换列

1 个答案: