チェックボックスをオンにすると、データテーブルの非表示の列を表示します。

Question

dataTableに非表示の列を表示しようとしています。私はdataTablesのドキュメントから私のコードを書いたが、うまくいかなかった。 codepen

Answer 1

上

var $dtable = $('#example'); 
       var dtable = $dtable.DataTable({ 
        "scrollX": true, 
        "info":  false, 
        "dom": 'Bfrtip', 
        "columns": [ 
         {"data": "name", className: 'profile', visible: true}, 
         {"data": "position", className: 'sensitive', visible: false}, 
         {"data": "office", className: 'profile', visible: true}, 
         {"data": "age", className: 'sensitive', visible: false}, 
         {"data": "startdate", className: 'profile', visible: true}, 
         {"data": "salary", className: 'sensitive', visible: false} 
        ], 
        "buttons": [ 
         'csv' 
        ] 
       }); 

       $('.rect-check input').change(function(e){ 
        console.log($(this).data('column')) 

        // Get the column API object 
        var column = $dtable.DataTable().column($(this).data('column')); 

        // Toggle the visibility 
        column.visible(true); 
       }) 

HTML

<div class="rect-check"> 
    <input data-column="sensitive" type="checkbox"> Show sensitive 
</div> 

<table width="100%" class="display" id="example" cellspacing="0"> 
.... 

チェックフルたとえば、あなたがそのように処理しなければならないクラスに参照されているので：

<input data-column=".sensitive" type="checkbox"> Show sensitive 
        ^or add a dot when you retrieve it. 

そして、それが動作します。複数の列だけではなく、最初のヒットを取得するには、列を使用し、その結果を反復処理： - >http://jsfiddle.net/s8005xg1/

$('.rect-check input').change(function(e){ 
    // Get the column API object 
    var className = $(this).data('column'); 
    var columns = dtable.columns(className); 
    // Toggle the visibility 
    columns.each(function() { 
    this.visible(true) 
    }) 
}) 

はフィドルにごcodepenを移動しました