JQuery DataTables：如何显示/隐藏多个表的行详细信息？

Posted 2023-05-08

【中文标题】JQuery DataTables：如何显示/隐藏多个表的行详细信息？

【英文标题】：JQuery DataTables: How to show/hide row details with multiple tables?

【发布时间】：2012-05-13 10:09:57

【问题描述】：

我基本上是在尝试结合 DataTables 文档中给出的两个示例中的代码。第一个示例展示了如何在一个页面上拥有多个 DataTable，而另一个示例允许您显示/隐藏每一行的详细信息。

我已将“dataTable”类应用于我的每个动态生成的表，因此以下代码将它们全部转换为 DataTables（并禁用第一列的排序，因为这是显示/隐藏图标所在的位置）：

var oTable = $('.dataTable').dataTable(
    "aoColumnDefs" : [ 
        "bSortable" : false,
        "aTargets" : [ 0 ]
     ],
    "aaSorting" : [ [ 1, 'asc' ] ]
)

然后我添加一个事件侦听器，以在用户单击第一列中的图像时显示/隐藏附加的详细信息行：

$('.dataTable tbody td img').live('click', function() 
    var nTr = $(this).parents('tr')[0];

    if (oTable.fnIsOpen(nTr)) 
        /* This row is already open - close it */
        this.src = "../examples_support/details_open.png";
        oTable.fnClose(nTr);
     else 
        /* Open this row */
        this.src = "../examples_support/details_close.png";
        oTable.fnOpen(nTr, fnFormatDetails(), 'details');
    
);

问题是这只适用于页面上的第一个 DataTable。当我单击任何其他表格上一行中的显示/隐藏图标时，图标会更改，但详细信息行不会出现。进一步单击同一图标没有任何效果。有谁知道如何在一页上使用多个数据表时显示/隐藏详细信息行？感谢您的帮助。

【参考方案1】：

因为你正在定义

var oTable = $('.dataTable').dataTable( \\YOURSTUFF)`;

您的变量 oTable 将您的所有数据表作为其值。

您唯一需要做的就是获取包含您点击的元素的数据表。您可以通过添加来实现这一点

tbl = $(this).parent().parent().dataTable();

到您的点击函数并将所有oTable 调用更改为tbl。

玩得开心；-)