jquery - 获取单击 Jquery Datatables 按钮上的单元格值

Question

我已经使用 JQuery Datatable 来显示下面的信息，而且我是这个插件的新手：

jQuery 数据表

在“WifiCode”字段上，我使用“render”来显示一个按钮。

我需要在单击按钮时获取该行中的值或特定列值。

我怎样才能做到这一点 ？

<script>
    $(document).ready(function () {
        var table = $('#visitorsTable').DataTable({              
            "ajax": {
                "url": "Home/LoadData",
                "type": "GET",
                "datatype": "json",
            },
            "columns": [                   
                { "data": "FirstName" },
                { "data": "LastName" },                   
                { "data": "PlateNumber" },
                {
                    "data": "WifiCode", 
                    "render": function(wifiCode) {
                       if (wifiCode) {                              
                           return '<span> ' + wifiCode + '</span><button data-visitor-wifi="'+ wifiCode +'" id="btnResend"></button>';
                       }                           
                   }
                },                   
            ]
        });
    });
</script>

标签： jquerydatatablesrowcell

Answer 1

首先，您需要从 中删除该id属性，button因为它会创建无效的重复项。如果需要，您可以改用一个类：

return '<span>' + wifiCode + '</span><button class="yourButton" data-visitor-wifi="' + wifiCode + '"></button>';

然后，您可以使用委托的事件处理程序来附加要在 click 事件下运行的逻辑。要从表中获取所需的列，您可以使用 DOM 遍历来获取与单击按钮的位置相关的元素：

$('#visitorsTable').on('click', '.yourButton', function() { 
  var val = $(this).closest('tr').find('td:eq(0)').text(); // amend the index as needed
  console.log(val);
});