数据表,如何在表的所有行上绑定事件
我的数据表工作正常,除了我试图在每一行上添加dblclick
function,这部分工作。
所以,这是我的代码:
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
仅适用于最初在第一页中呈现的行。 当我对数据进行排序/搜索并且显示的数据发生更改时, dblclick
事件对于那些未在第一页中显示的行不起作用。
任何人都可以帮助解决这个谜团吗? 谢谢
第一个答案是接近完美,但必须有一个小的调整,以阻止它工作。
就像在jquery apidoc on()中一样,你必须像下面的"tr"
那样添加[, selector ]
$("#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 });
如果你需要一个不同但相似的场景来绑定到datatable中的所有特定类,请参阅下面的示例
$("#sample_2 tbody").on("click", "a.ApproveLink", approveLinkHandler);
还考虑关注此问题的官方文档:
解决这个问题的最好方法之一是使用jQuery的on方法委托事件
https://datatables.net/examples/advanced_init/events_live.html
试试这个
$("#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 });
我们可以直接在页面加载时加载的数据上使用事件。我们需要使用它们。