微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决数据表在行中隐藏/显示类

我正在尝试在触发事件时切换数据表行中某些 div 或跨度的可见性(我无法使用隐藏/显示列)。

这里大概是我的脚本 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 中隐藏/显示列的情况下找到解决方案,并且在 stackoverflow 上也是如此:(

欢迎任何帮助:)

干杯

解决方法

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

fig,axs = plt.subplots(figsize=(12,12)) 

sns.heatmap(data=heat_df,cmap="Blues",annot=True,annot_kws={'fontsize' : 20 },xticklabels=[0,1],yticklabels=[0,square=True,ax=axs)
axs.set_title("Accuracy Score: " + str(accuracy),fontsize=24,pad=100)
axs.set_xlabel("Predicted label",fontsize=24)
axs.set_ylabel("Actual label",fontsize=24)
axs.tick_params(axis='y',labelsize=20)
axs.tick_params(axis='x',labelsize=20,pad=100)

plt.show()

$("#testbutton").on("click",function(e) { var nodes = myTable.cells( ':has(.table-evo)' ).nodes().to$(); $(".table-evo",nodes).toggle(); }); 变量假定您已经定义了 DataTable 并将其分配给一个变量:

myTable

下面的命令...

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

...选择所有包含具有 myTable.cells( ':has(.table-evo)' ) 类的任何子元素的 DataTables 单元格。 DataTables 在此函数中支持 jQuery 选择器。

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

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

<td> 函数将这些 DOM 节点转换为 jQuery 对象。

之后,您可以对所选节点中的类执行to$()toggle()

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。