datatable复选框切换列

datatable checkbox toggle column

本文关键字：复选框 datatable      更新时间：2023-09-26

我有一个巨大的数据表，其中有太多列。我已经过滤了其中一些，比如这个

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

我的复选框正确地添加或删除了列，但它们总是空的！如果列可见，我希望选中它们；如果列隐藏，我希望取消选中它们。

我希望我是清楚的；我的英语不流利。

我终于理解了

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

它工作得很好，我可以看到默认情况下哪些列是隐藏的，我可以通过我的复选框添加或删除列。。。

很抱歉识别错误，但我认为这个代码可能是有用的。

相关文章：