JQuery数据表:显示/隐藏多个表的行细节

JQuery DataTables: Show/hide row details with multiple tables

本文关键字：细节 隐藏 数据表 显示 JQuery      更新时间：2023-09-26

我知道这里有一个类似的问题JQuery数据表:如何显示/隐藏行细节与多个表?但这并不完全适用于我目前的问题。

我有代码:

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类添加到第二个表，那么它们作为数据表工作，但在两个表中显示/隐藏按钮失败。这两个表具有相同的字段和内容计数，只是为了使其工作，但仍然没有成功。

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

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

的点击功能，但我已经尝试过，它没有工作。

我错过了什么??

简而言之:去掉fnInitComplete，并将"live"调用移到dataTable调用的下面。

作为一个例子，如果您有三个表，在每个表完成后，您当前的代码将执行fnInitComplete方法-因此fnInitComplete被调用3次。您的fnInitComplete使用选择器将单击事件"激活"到一个img，并且选择器将"激活"到所有表。这导致了多个绑定。请参阅这个jsp http://jsfiddle.net/KeVwJ/，它复制了您的方法。(请注意，我没有使用图像，所以只捕获click上的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，并将"live"的代码放在对dataTable的调用之后。这样就解决了。请参阅此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'));
        } );
相关文章：