當檢查複選框時在dataTables中顯示隱藏列

Question

我試圖顯示隱藏在dataTable中的列。我按照dataTables文檔的理解編寫了我的代碼，但它不起作用。

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

支票codepen

Answer 1

充分的例子，因爲你引用你必須處理它是這樣一類：

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

然後，它的工作原理。使用列獲得多列，而不僅僅是第一擊，並遍歷結果：

$('.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的小提琴 - >http://jsfiddle.net/s8005xg1/