Question

每当用户单击“ reportTab”超链接时，我想在表中隐藏列[12]，我正在使用数据表。如何使用columnDefs中的“ visible”属性执行此操作？

我在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]};
}

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

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

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

1 个答案: