数据表在行中隐藏/显示类答案

【问题标题】：Datatables hide/show class in rows数据表在行中隐藏/显示类
【发布时间】：2021-05-19 06:43:39
【问题描述】：

我正在尝试在触发事件时切换我的 Datatables 行中某些 div 或 span 的可见性（我无法使用隐藏/显示列）。

我有一个包含 500 行的 DataTables 表。\

<button class="btn btn-primary" id="testbutton">hide/show</button>

<table id="tableUserTest" class="dataTable" style="width:100%">
  <thead>
    <tr>
      <th>column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>7958<span class="table-evo">some stuff</span></td>
    </tr>
    <!-- many more rows -->
  </tbody>
</table>

每一行都包含一个 span.table-evo 内部（我试图切换的那个）\

$(document).ready(function() {
  $("#testbutton").on("click", function(e) {
    $(".table-evo").toggle();
  });
  $('#tableUserTest').DataTable();

});

我有一个按钮来切换这个类，它会触发事件。

等待结果：所有行的 span.table-evo 都已切换。但是它只影响可见的行。

我读到直接使用 jquery 来更改 Datatables 实例并不好，但是如果不使用隐藏/显示来自 api 的列，我无法找到解决方案，在 stackoverflow 上也是如此:(

欢迎任何帮助:)

干杯

【问题讨论】：

手头没有细节：查看数据表行渲染回调。当它呈现行时，根据需要隐藏/显示。或者，如果这是针对表中的所有行，则将一个类添加到表的父 div 并使用 css。示例：jsfiddle.net/wLuyohdj
@freedomn-m 谢谢你的建议，我其实没想过这个简单的技巧，但它很好用！

标签： jquery datatables

【解决方案1】：

您可以按如下方式使用 DataTables API：

$("#testbutton").on("click", function(e) {
  var nodes = myTable.cells( ':has(.table-evo)' ).nodes().to$();
  $(".table-evo", nodes).toggle();
});

myTable 变量假定您已定义 DataTable 并将其分配给变量：

var myTable = $('#tableUserTest').DataTable( {...} );

以下命令...

myTable.cells( ':has(.table-evo)' )

...选择所有包含具有 table_evo 类的任何子元素的 DataTables 单元格。 DataTables 在这个函数中支持 jQuery 选择器。

nodes() 函数然后为这些 DataTable 单元格选择 <td> DOM 节点。

这对您的 DataTable 中的整个数据集进行操作，而不仅仅是当前页面上呈现的 DOM 元素。这很重要，因为这意味着我们正在操作需要切换的整个节点集——即使是那些由于 DataTables 分页而未显示的节点。

to$() 函数将这些 DOM 节点转换为 jQuery 对象。

之后，您可以在所选节点中的类上执行toggle()：$(".table-evo", nodes).toggle()。

【讨论】：