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

【问题标题】：JQuery DataTables: How to show/hide row details with multiple tables?JQuery DataTables：如何显示/隐藏多个表的行详细信息？
【发布时间】：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。当我单击任何其他表格上一行中的显示/隐藏图标时，图标会更改，但详细信息行不会出现。进一步单击同一图标没有任何效果。有谁知道如何在一页上使用多个数据表时显示/隐藏详细信息行？感谢您的帮助。

【问题讨论】：

标签： jquery datatables

【解决方案1】：

因为你正在定义

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

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

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

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

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

玩得开心；-)

【讨论】：