1

我知道这里有一个类似的问题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();

到点击功能,但我试过了,它没有用。

我错过了什么??

4

1 回答 1

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'));
        } );        
于 2013-05-10T23:41:05.783 回答