当检查复选框时在dataTables中显示隐藏列

问题描述：

我试图显示隐藏在dataTable中的列。我按照dataTables文档的理解编写了我的代码，但它不起作用。当检查复选框时在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

答

充分的例子，因为你引用你必须处理它是这样一类：

<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/

当检查复选框时在dataTables中显示隐藏列

相关推荐