Question

我的jQuery DataTable中的每一行都有一个按钮。我想要当我单击按钮来提醒所选记录的第一列的值。

问题是，使用按钮的代码，它不起作用。

这是我遵循的文档：https://datatables.net/examples/ajax/null_data_source.html

这是我的代码：

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>

请协助。谢谢。

Answer 1

因此，经过大量研究，我明白了。我不得不更改按钮功能。

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

如果有人有更好的方法，请告诉我。

jQuery DataTable中按钮的onClick函数

1 个答案: