Afficher les colonnes masquées dans les tables de données lorsque vous cochez une case

Question

J'essaie d'afficher les colonnes masquées dans la table de données. J'ai écrit mon code tel que je le comprends d'après la documentation de dataTables, mais cela n'a pas fonctionné.

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"> 
.... 

chèque exemple complet sur codepen

Answer 1

Puisque vous faites référence à une classe, vous devez gérer comme tel:

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

Ensuite, il fonctionne. Utiliser les colonnes pour obtenir plusieurs colonnes et pas seulement le premier coup, et itérer sur le résultat:

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

déplacé votre codepen à un violon ->http://jsfiddle.net/s8005xg1/