JQuery DataTables: Показать/скрыть сведения о строках с несколькими таблицами

Question

Я знаю, что здесь есть аналогичный вопрос 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 класса второй таблицы, то они работают как DataTables но кнопка показать/скрыть неудачу в обеих таблицах. Обе таблицы имеют одинаковое количество полей и контента, только для того, чтобы заставить его работать, но все равно не имеют успеха.

На аналогичной должности, человек предлагает добавить:

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

к функции мыши, но я попробовал это, и это не сработало.

Что мне не хватает?

Answer 1

Вкратце: избавитесь от fnInitComplete и переместите «живой» вызов ниже вызова dataTable.

В качестве примера, если у вас есть три таблицы, после завершения каждой таблицы ваш текущий код будет выполнять метод fnInitComplete, поэтому fnInitComplete вызывается 3 раза. Ваш fnInitComplete использует селектор, чтобы «пережить» событие click для 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. Это должно решить. См. Этот jsfiddle: http://jsfiddle.net/rgMNu/ Щелкните по любой строке в таблице и определите правильный класс таблицы. Опять же, поскольку я захватываю клик на td, мне нужно сделать это .parentNode.parentNode.parentNode. Я думаю, тебе придется сделать еще один уровень.

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