JQuery DataTables:如何显示/隐藏具有多个表的行详细信息? [英] JQuery DataTables: How to show/hide row details with multiple tables?

问题描述

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

I am basically trying to combine code from two examples given in the DataTables documentation. The first example shows how to have multiple DataTables on one page, while the other allows you to show/hide details about each row.

我已将"dataTable"类应用于我的每个动态生成的表，因此以下代码将它们全部转换为DataTables(并禁用了对第一列的排序，因为那是显示/隐藏图标所在的位置):

I have applied the class "dataTable" to each of my dynamically generated tables, so the following code turns them all into DataTables (and disables sorting on the first column since that's where the show/hide icon goes):

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

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

Then I add an event listener to show/hide the additional row of details when the user clicks the image in the first column:

$('.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.当我单击其他任何表上一行中的显示/隐藏"图标时，该图标会更改，但不会显示详细信息行.再次单击同一图标无效.有谁知道在一页上使用多个数据表时如何显示/隐藏明细行?感谢您的帮助.

The problem is that this only works for the first DataTable on the page. When I click the show/hide icon in a row on any other table, the icon changes, but the details row does not appear. Further clicks on the same icon have no effect. Does anyone have any idea how to show/hide detail rows when using multiple DataTables on one page? I appreciate your help.

推荐答案

因为您正在定义

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

您的变量oTable将所有dataTables作为其值.

your variable oTable has all your dataTables as its value.

您唯一要做的就是获取包含您单击的元素的dataTable.您可以通过添加

The only thing you have to do is, to get the dataTable that contains your clicked element. You can achieve this by adding

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

单击功能并将所有oTable调用都更改为tbl.

to your click function and change all oTable calls to tbl.

玩得开心；-)

这篇关于JQuery DataTables:如何显示/隐藏具有多个表的行详细信息?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！