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

Posted 2023-05-09

【中文标题】JQuery DataTables：显示/隐藏多个表的行详细信息

【英文标题】：JQuery DataTables: Show/hide row details with multiple tables

【发布时间】：2013-05-05 09:11:13

【问题描述】：

我知道JQuery DataTables: How to show/hide row details with multiple tables? 这里有一个类似的问题，但这并不完全适用于我当前的问题。

我有代码：

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();

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

我错过了什么？

【问题讨论】：

您的表的 ID 是什么？确保 ID 是唯一的。看起来您正在使用类选择器制作表格 dataTables。如果 ID 不是唯一的，则会导致问题。

dataTables 不需要 ID 作为选择器

我没有说它需要一个 ID 作为选择器。但是如果 ID 不是唯一的，就会遇到问题。在这里查看我的答案：***.com/questions/16463646

我正在调用所有具有 dataTable 类的表，因此这些表没有 ID。我的问题是 oTables var 带有 2 个表，我需要找到一种方法来选择当前表。

【参考方案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，并将“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'));
         );        

【讨论】：

谢谢，我已经解决了一些问题，但它看起来很丑……将它移出 Init 函数很有意义:)