Question

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

我已经将类“dataTable”应用到我的每个动态生成的表中，因此以下代码将它们全部转换为DataTables（并禁用第一列上的排序，因为那是show / hide图标所在的位置）：

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。当我单击任何其他表格中的行中的显示/隐藏图标时，图标会更改，但不会显示详细信息行。进一步点击同一个图标无效。有没有人知道如何在一个页面上使用多个DataTables时显示/隐藏详细信息行？感谢您的帮助。

Answer 1

因为你正在定义

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

您的变量oTable将所有dataTable作为其值。

您唯一需要做的就是获取包含所点击元素的dataTable。您可以通过添加

来实现此目的

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

点击您的点击功能，将所有oTable次来电更改为tbl。

玩得开心玩乐; - ）

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

1 个答案: