onview函数用于jquery DataTable中的按钮

Question

I have a button for each row inside my jquery DataTable. I want when I click the button to alert the value of the first columns of the selected record.

The problem is that, with the code I have for the button, it does not work.

This is the documentation that I have followed: https://datatables.net/examples/ajax/null_data_source.html

Here is my code:

jQuery

$(document).ready(function () {
    $.ajax({
        type: "POST",
        url: "WebService1.asmx/Bind",
        dataType: 'json',
        success: function (data) {
            $('#datatable').DataTable({
                data: data,
                columns: [
                    { 'data': 'CenterID' },
                    { 'data': 'CenterName' },
                    { 'data': 'LicenseKey' },
                    { 'data': 'ExpiryDate' },
                    { 'data': 'YearID' },
                    { 'data': 'Date' },
                    // This is where I add the button
                    { "defaultContent": "<button>Edit</button>"}
                ]
            });
        }

    });
    //This is where I make an attempt to add functionality for the button in the datatable
    $('#datatable tbody').on('click', 'button', function () {
        var data = table.row($(this).parents('tr')).data();
        alert("The value is: " + data[0]);
    });
});

HTML

<table id="datatable" class="display" style="width: 100%">
            <thead>
                <tr>
                    <th>CenterID</th>
                    <th>CenterName</th>
                    <th>LicenseKey</th>
                    <th>ExpiryDate</th>
                    <th>YearID</th>
                    <th>Date</th>
                    <th>Action</th>
                </tr>
            </thead>
        </table>

Please assist. Thank you.

Answer 1

So after a lot of research, I got it. I had to change the button function.

$('#datatable tbody').on( 'click', 'button', function () {
     var tr = $(this).closest('tr');
     var value = $(tr).find('td').eq(0)[0].innerHTML;
     alert(value);
     return false;
});

If anyone has a better way of doing this, please let me know.