如何根据事件正确指定列的可见性？答案

【问题标题】：How to properly specify the visibility of a column based on an event?如何根据事件正确指定列的可见性？
【发布时间】：2019-07-16 01:19:53
【问题描述】：

每当用户单击“reportTab”超链接时，我想在我的表中隐藏列 [12]，我正在使用数据表。如何使用 columnDefs 中的“可见”属性来做到这一点？

我在我的 javascript 中使用了“addEventListener”，所以当用户单击超链接时，我会将布尔变量设置为 true。我发现这个问题“Apply a condition on specific column data - jquery DataTable”与我想做的事情非常相关，因为我正在寻找一种方法来根据条件设置列的可见性。我尝试按照 davidkonrad 在这个问题上的回答，然后我尝试为我想做的事情创建我的逻辑。但由于某种原因，它不起作用。我是 js 的新手，所以我不知道我是否做对了所有事情。 js 已经呈现在我要执行此操作的页面上。

我期待当用户单击“reportTab”时，列 [12] 会显示，否则它将被隐藏。但是，它不仅不会在未单击“reportTab”时隐藏，而且会在列 [12] 下的单元格上显示此输出“[object Object]”。我想这样做是因为相关性。列 [12] 与其他选项卡/超链接无关，这就是我想隐藏它的原因。

var clicked = false;
document.getElementById("reportTab").addEventListener("click", function () {
        clicked = true;
});

```columnDefs
"targets": [12],
render: function () {
    return clicked === true ? { "visible": true, "targets": [12] } : { "visible": false, "targets": [12]};
}

【问题讨论】：

只需使用column().visible() API。
非常感谢亚历山大！这真的是一个很大的帮助。
所以我尝试使用这个，但不知何故我无法产生我想要的输出。相反，这是我所做的：` (eval(boolean_var) === true && eval(boolean_var) !== true) ？ { "visible": false, "targets": [0, 2, 13, 12] } : { "visible": false, "targets": [0, 2, 13] },` 这个给出了我想要的输出.但仍然再次感谢亚历山大。我只是发布我自己的问题的解决方法，也许可以参考其他人。

标签： javascript datatables

【解决方案1】：

只需在点击事件处理程序中使用column().visible() API。

$(document).ready(function() {
  $('#myTable').DataTable({
    columnDefs: [{
        targets: [2],
        visible: false
      }]
  });
});
$('#myButton').on('click', function() {
  $('#myTable').DataTable().column(2).visible(true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>$170,750</td>
    </tr>
  </tbody>
</table>

<button id="myButton">Click Me</button>

默认情况下第三列是隐藏的。单击按钮使该列可见。

【讨论】：