选中复选框时显示数据表中的隐藏列答案

【问题标题】：Show hidden columns in dataTables when check a checkbox选中复选框时显示数据表中的隐藏列
【发布时间】：2017-08-14 08:03:25
【问题描述】：

我正在尝试显示隐藏在数据表中的列。我根据 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上的完整示例

【问题讨论】：

标签： jquery datatables show-hide

【解决方案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)
  })  
})

将您的代码笔移到小提琴上 -> http://jsfiddle.net/s8005xg1/

【讨论】：