1

我基本上是在尝试组合 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。当我在任何其他表格上单击一行中的显示/隐藏图标时，图标会发生变化，但不会出现详细信息行。进一步单击同一图标没有任何效果。有谁知道如何在一页上使用多个数据表时显示/隐藏详细信息行？我感谢您的帮助。

4

1 回答 1

4

因为你正在定义

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

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

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

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

到您的点击功能并将所有oTable调用更改为tbl.

玩得开心；-)

于 2012-05-11T10:19:19.520 回答