Получить значение ячеек при нажатии кнопки на Jquery Datatables

Question

Я использовал JQuery Datatable для отображения информации ниже, и я новичок в этом плагине:

Jquery DataTable

В поле "WifiCode" яиспользуя «рендер» для отображения кнопки.

Мне нужно, чтобы при нажатии кнопки получить значения или конкретное значение столбца в этой строке.

Как я могу это сделать?

<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>

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);
});