JQuery DataTables：顯示/隱藏多個表的行細節

我知道這裏有一個類似的問題JQuery DataTables: How to show/hide row details with multiple tables?但這並不完全適用於我目前的問題。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類添加到第二個表，然後他們的工作作爲數據表，但顯示/隱藏按鈕，兩個表中的失敗。兩個表都有相同數量的字段和內容，只是爲了使其工作，但仍然沒有成功。

在類似的帖子，該人士建議說：

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

的點擊功能，但我已經試過了，並沒有奏效。

我在想什麼？

來源

2013-05-10 Fabi

什麼是你的表的ID？確保這些ID是唯一的。它看起來像使用類選擇器創建表dataTables。如果這些ID不是唯一的，則會導致問題。 – 2013-05-10 20:01:19

dataTables不需要ID作爲選擇器 – Fabi 2013-05-10 20:44:23

我沒有說它確實需要一個ID作爲選擇器。但是如果ID不是唯一的，你會遇到問題。看到我的答案在這裏：http://stackoverflow.com/questions/16463646/ – 2013-05-10 20:50:22

簡而言之：擺脫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，我只需要做這個.parentNode.parentNode.parentNode。我認爲你將不得不做另一個級別。

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

來源

2013-05-10 23:41:05

謝謝你，我已經做了一些工作，但它看起來非常醜陋......它使得它很有意義將其移出Init函數:) – Fabi 2013-05-13 14:55:56

JQuery DataTables：顯示/隱藏多個表的行細節

回答

相關問題