如何解决数据表在行中隐藏/显示类
我正在尝试在触发事件时切换数据表行中某些 div 或跨度的可见性(我无法使用隐藏/显示列)。
这里大概是我的脚本 https://jsfiddle.net/pxLmth7f/
<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 举报,一经查实,本站将立刻删除。