使数据表行可单击

时间:2013-04-06 02:04:33

标签: jquery jquery-datatables

我有一个使用datatables.net通过ajax加载数据的表。我想这样做,以便当用户点击一行时,它链接到一个附加了该行主键的get变量的URL。

我对Datatables比较陌生,所以我的黑客尝试/想法是使用Datatables在我的主键两列中应用两个类。这两个类是hide(显示的css:none)和projectID(标识该列,因此我可以使用jquery获取它的值)。我能够使用aoColumns属性应用这些类,它确实隐藏了列并附加了projectID类。但是我认为,因为Datatables正在创建表格,所以它阻止我使用

$('#project-table tr').click(function(){alert('clicked');}

所以我试过

$('#project-table tr').live('click',function(){alert('clicked');})};

也无济于事。

我认为有一个更好的方法,比我用来使行可点击,链接到带有附加主键获取变量的页面,但我找不到一个例子。如果有人有一个例子的链接或者可以指出我正确的方向,那将是值得赞赏的。

1 个答案:

答案 0 :(得分:5)

我有一个使用datatables.net通过ajax加载数据的表

这意味着在页面加载期间绑定到元素的任何事件处理程序将不适用于加载的数据,除非将事件委托给静态父元素 - 这意味着该元素永远不会被删除或替换,并且将无限期地存在

$(document).on('click', '#project-table tr', function(){
    alert('This is a click on a dynamic element');
});

在这里,我们将click事件绑定到document。如果您愿意,可以选择更接近的元素(用于提高性能)。

Here is the link to the documentation for .on()

作为旁注 - 在jQuery 1.9 +中,删除了一些功能。其中之一是.live()函数,它已被.on()方法替换(如上所示)。这就是为什么它不起作用。此外,console会告诉您这一点。许多当前浏览器都附带了自己的web inspector,否则您可以对浏览器进行谷歌搜索并找到替代方案。