Question

我正在通过ajax调用使用数据表，并且数据表的脚本类似于-

$(document).ready(function() {
    $('#example').DataTable({
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "salary" }
        ]
    });
});

每行都显示为-"<tr role="row" class="even">"

但是我需要在每个数据表行上放置一个onlcick函数，例如-"<tr ondblclick="getDetails(id)" role="row" class="even">"

那么我该怎么做呢？

谢谢。

Answer 1

如this site所示，您可以

$('#example tbody').on('click', 'tr', function () {
    var data = table.row( this ).data();
    alert( 'You clicked on '+data[0]+'\'s row' );
} );

或dblclick

$('#example tbody').on('dblclick', 'tr', function () {
    var data = table.row( this ).data();
    alert( 'You double clicked on '+data[0]+'\'s row' );
} );

Answer 2

您可以在类“ even”上的click事件上创建一个jQuery。但是要获得一个ID，您需要在每行上具有一个ID或一个数据ID才能知道要使用哪个ID。

<tr role="row" class="even" data-id="1">
<tr role="row" class="even" data-id="2">

$(".even, .odd").on("click", function() {
   var id = $(this).data("id); or $(this).id(); // need to check what rowId does
   alert("test"); or alert(id);
   getDetails(id);
});

您可以通过执行以下操作来设置ID：

$('#example').DataTable({
    "columns": [
        { "data": "name" },
        { "data": "position" },
        { "data": "salary" }
    ],
    rowId: 'staffId' //staffID has to be given from you
});

Answer 3

jquery数据表已满足您的点击事件

您可以使用来自this site

的简单方法来做到这一点

1）如果您想要单击行的事件

$(document).ready(function() {
    var table = $('#example').DataTable();

    $('#example tbody').on('click', 'tr', function () {
        var data = table.row( this ).data();
        alert( 'You clicked on '+data[0]+'\'s row' );
    } );
} );

2）如果您想要双击事件，则

$(document).ready(function() {
        var table = $('#example').DataTable();

        $('#example tbody').on('dblclick', 'tr', function () {
            var data = table.row( this ).data();
            alert( 'You clicked on '+data[0]+'\'s row' );
        } );
    } );

如何在每个数据表tr上添加onclick函数？

3 个答案: