问题描述
我正在尝试在触发事件时切换数据表行中某些 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()
。