2013-03-08 57 views
8

我的數據表工作正常,除了我試圖在每行添加dblclick功能的事實,這部分工作。Datatables,如何綁定表的所有行上的事件

所以,這是我的代碼:

oTable = $('#example').dataTable({ 
    "aaSorting": [[ 1, "desc" ]], 
    "bJQueryUI": true, 
    "sPaginationType": "full_numbers" 
}); 

/* Add a click handler to the rows */ 

//This highlights the row selected 
$("#example tbody").click(function(event) { 
     $(oTable.fnSettings().aoData).each(function(){ 
       $(this.nTr).removeClass('row_selected'); 
     }); 
     $(event.target.parentNode).addClass('row_selected'); 
}); 

//this attaches a dblclick event on the row 
$("#example tr").dblclick(function() { 
     var iPos = oTable.fnGetPosition(this); 
     var aData = oTable.fnGetData(iPos); 
     var iId = aData[1]; 
     $('#edit'+iId).click(); //clicks a button on the first cell 
}); 

行的高亮是確定的表中的所有行,但dblclick對於那些最初在哪裏呈現在第一頁的行工作ONLY。當我對數據進行排序/搜索並且顯示的數據發生更改時,dblclick事件不適用於那些不顯示在第一頁中的行。

任何人都可以幫助解決這個謎團? 感謝

回答

17

第一個答案是近乎完美的,但必須有一個小的調整,它停止工作。

如jQuery的apidoc on()你必須添加[, selector ],因爲我與"tr"

$("#example").on("dblclick", "tr", function() { 
     var iPos = oTable.fnGetPosition(this); 
     var aData = oTable.fnGetData(iPos); 
     var iId = aData[1]; 
     $('#edit'+iId).click(); //clicks a button on the first cell 
}); 
+0

Wowwww你是MAN!謝謝,它現在就應該如此! – MaVRoSCy 2013-03-08 12:45:32

+0

但是,我還是沒有明白!爲什麼我的初始代碼錯了? – MaVRoSCy 2013-03-08 12:47:36

+0

在「Direct和委託事件」的api頁面搜索並通讀它。希望它能幫助你。 – DKSan 2013-03-08 12:56:56

1

試試這個

$("#example tbody").on("click",function(event) { 
     $(oTable.fnSettings().aoData).each(function(){ 
       $(this.nTr).removeClass('row_selected'); 
     }); 
     $(event.target.parentNode).addClass('row_selected'); 
}); 


    $("#example tr").on("dblclick",function() { 
      var iPos = oTable.fnGetPosition(this); 
      var aData = oTable.fnGetData(iPos); 
      var iId = aData[1]; 
      $('#edit'+iId).click(); //clicks a button on the first cell 
    }); 

我們可以直接在頁面時loading.Othersise我們需要在使用將加載數據使用事件。

+0

NOP!它仍然不起作用。再次只有第一頁行被綁定到一個事件而不是整個數據集 – MaVRoSCy 2013-03-08 12:19:17

2

的情況下,下面做了你需要一個不同但相似的場景將綁定到所有具體的類中的數據表看下面的示例

$("#sample_2 tbody").on("click", "a.ApproveLink", approveLinkHandler); 

還要考慮以下有關此問題的官方文檔:

一個處理這個問題的最佳途徑是通過使用 委派事件與jQuery對方法

https://datatables.net/examples/advanced_init/events_live.html

相關問題