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

Posted 2023-05-08

【中文标题】数据表在行中隐藏/显示类

【英文标题】：Datatables hide/show class in rows

【发布时间】：2021-05-19 06:43:39

【问题描述】：

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

这大概是我的脚本 https://jsfiddle.net/pxLmth7f/

我有一个包含 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 的列，我无法找到解决方案，在 *** 上也是如此:(

欢迎任何帮助:)

干杯

【问题讨论】：

手头没有细节：查看数据表行渲染回调。当它呈现行时，根据需要隐藏/显示。或者，如果这是针对表中的 所有 行，则将一个类添加到表的父 div 并使用 css。示例：jsfiddle.net/wLuyohdj

@freedomn-m 谢谢你的建议，我其实没想过这个简单的技巧，但它很好用！

【参考方案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()。