JQuery DataTables：显示/隐藏具有多个表的行详细信息

Question

我知道这里有一个类似的问题JQuery DataTables：如何显示/隐藏具有多个表的行详细信息？ 但这并不完全适用于我当前的问题。

我有代码：

var oTable = $('.dataTable').dataTable( {
    "aoColumnDefs": [
     { "bSortable": false, "aTargets": [ 0,3,4 ] },
     { "bVisible": false, "aTargets": [ 4 ] }
    ],  
    "aoColumns": [
      null,
      null,
      null,
      null,
      { "sType": "html" }
    ],    
    "aaSorting": [[1, 'asc']],
    "bFilter": false,
    "bPaginate": false,
    "fnInitComplete": function(oSettings) {
      /* Add event listener for opening and closing details
      * Note that the indicator for showing which row is open is not controlled by DataTables,
      * rather it is done here
      */

    $('.dataTable tbody td img').live('click', function () {
         var nTr = this.parentNode.parentNode;

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

如果将dataTable类添加到第二个表中只有一个，那将起作用，然后它们作为数据表工作，但两个表中的show / hide按钮均失败。 这两个表具有相同的字段和内容计数，只是为了使其起作用，但仍然没有成功。

该人在类似的帖子中建议添加：

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

单击功能，但我已经尝试过了，但是没有用。

我想念什么？

Answer 1

简而言之：摆脱fnInitComplete，并将“实时”调用移到dataTable调用下方。

例如，如果您有三个表，则在每个表完成之后，您当前的代码将执行fnInitComplete方法-因此fnInitComplete被调用3次。 您的fnInitComplete使用选择器将“点击”事件“实时”存储到img，并且选择器将“实时”显示所有表。 这导致多个绑定。 请参阅此jsfiddle， http：//jsfiddle.net/KeVwJ/ ，其中复制了您的方法。 （请注意，我没有使用图像，因此仅捕获td单元中的单击，而不捕获图像）。

var oTable = $('.dataTable').dataTable( {
    "bFilter": false,
    "bPaginate": false,
    "fnInitComplete": function(oSettings) {
        $('.dataTable tbody td').live('click', function () {
             var nTr = this.parentNode;
            alert(nTr);
        } );        
      }
});

如果单击表中的任何行，您将获得3个警报框，因为创建了3个表，并且它们对fnInitComplete上的所有表均进行“实时”单击。

要解决此问题，请删除fnInitComplete，并在对dataTable的调用之后放置“ live”代码。 那应该解决。 请参阅以下jsfiddle： http : //jsfiddle.net/rgMNu/单击表中的任何行，它将标识正确的表类。 同样，由于我捕获了对td的点击，因此只需要执行this.parentNode.parentNode.parentNode。 我认为您必须再做一个级别。

$('.dataTable tbody td').live('click', function () 
        {
            var t = this.parentNode.parentNode.parentNode;
            alert(jQuery(t).attr('class'));
        } );