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

Question

我正在尝试显示隐藏在数据表中的列。我按照我从 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

由于您引用的是 class，因此您必须这样处理它：

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

然后就可以了。使用 columns 获取多个列而不仅仅是第一个命中，并迭代结果：

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

将您的代码笔移至 fiddle -> http://jsfiddle.net/s8005xg1/

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

Show hidden columns in dataTables when check a checkbox

jquery

datatables

show-hide