如何在单击事件处理程序中访问行数据

Question

我有jquery代码的以下部分 - 它可以工作，我的表填充了数据，有标题等。现在，正如你所看到的，我在这个表中的“actions”下的每一行都有三个按钮。但是，我需要能够区分行动作。我用于此的JSON中的项目实际上有一个名为id的字段，并且已填充，有没有办法可以将该字段的值添加到我在这里的每个'a'标记中？这意味着当我执行click事件时，我可以获取id，并将正确的数据发送到我正在尝试的REST API ...我只是不知道如何在这里填充它！

    $('#datatables').DataTable( {
        "data":resultA,
        "columns": [
            { "data": "name" },
            { "data": "description" },
            { "data": "id",
              "className": "text-right",
               "defaultContent":             

            '<td class="text-right">' +
                '<a href="#" class="btn btn-simple btn-info btn-icon like"><i class="material-icons">favorite</i></a>' +
                '<a href="#" class="btn btn-simple btn-warning btn-icon edit"><i class="material-icons">dvr</i></a>' +
                '<a href="#" class="btn btn-simple btn-danger btn-icon remove"><i class="material-icons">close</i></a>' +
            '</td>'
                                }
        ],
        fixedHeader: {
            header: true,
            footer: true
        }
    });

Answer 1

解

您可以首先获取tr元素，然后使用row().data() API方法检索该行的数据，从而在点击事件处理程序中检索行ID。

例如：

// Handle click event on "Like" button
$('#datatables').on('click', 'a.like', function(){
   var api  = $('#datatables').DataTable();
   var data = api.row($(this).closest('tr')).data();

   console.log('ID is: ' + data['id']);
});

注意

您不需要在<td></td> defaultContent选项中将您的内容包装在children中。