Get value of cells on button clicked on Jquery Datatables

Question

I have used JQuery Datatable to display the info below and I'm new to this plugin:

Jquery DataTable

On field "WifiCode" I'm using "render" to display a button.

I need that when the button is clicked, to get the values or a specific column value in that row.

How can i do that ?

<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

Firstly you need to remove the id attribute from the button as it will create duplicates which are invalid. You can use a class instead, if required:

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

You can then use a delegated event handler to attach the logic to run under the click event. To get the required column from the table you can use DOM traversal to get the elements related to the position of the clicked button:

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