jquery - 如何将每行的删除按钮添加到 Jquery DataTable

Question

我正在使用 Jquery DataTable，我想对 DataTable 的每一行使用编辑和删除功能，并且我已经完成了单击 DataTable Row 的编辑部分。现在我正在寻找删除功能，但我无法实现相同的功能。

我试过这样：

数据表绑定代码：

        function LoadTableData() {
        var params = {
            UserName: $('#txtUserName').val(), UserID: $('#txtUserID').val(),
            Status: $('input[name="Status"]:checked').val()
        };
        $.ajax({
            url: 'UserService.asmx/Get_Data_MobileUser',
            method: 'post',
            data: JSON.stringify(params),
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',

            success: function (data) {
                $('#example').dataTable({
                    destroy: true,
                    data: data /*JSON.parse(data)*/,
                    columns: [
                        {
                            render: function (data, type, row, meta) {
                                return meta.row + meta.settings._iDisplayStart + 1;
                            }
                        },

                        { 'data': 'Status', class: 'editable text' },
                        { 'data': 'USER_LOGIN', class: 'editable text' },
                        { 'data': 'USER_NAME', class: 'editable text' },

                    ],

                    "columnDefs": [
                        {
                           
                            "render": function (data, type, row) {      
                                return '<button type="button">Delete</button>';
                                //return data + ' (' + row[3] + ')';
                            },
                            "targets": 0
                        },
                        { "visible": false, "targets": [3] }
                    ],
                    dom: 'Bfrtip',
                    select: true,

                    buttons: [
                        'copy', 'csv', 'excel', 'pdf', 'print'
                    ],
                    "searching": true,
                    "paging": true,
                    "info": true,
                    "language": {
                        "emptyTable": "No data available"
                    },
                    "fnRowCallback": function (nRow, aData, iDisplayIndex) {
                        $("td:first", nRow).html(iDisplayIndex + 1);
                        return nRow;
                    },
                })
                //function createButton(buttonType, rowID) {
                //    var buttonText = buttonType == "edit" ? "Edit" : "Delete";
                //    //return '<button class="' + buttonType + '" type="button">' + buttonText + '</button>';
                //    return "<a href='#my_modal' data-toggle='modal' class='open-AddBookDialog' data-book-id='my_id_value'><img src='Images/delete.png' height='20' width='20'></a>"
                //}
            },
            error: function (err) { // Added this event to capture the failed requests.
                console.log(err.responseText);
            }
        });
    };

表结构

<table id="example" class="display" style="width: 100%">
      <thead>
         <tr>
           <th>S.No</th>
           <th>Status</th>
           <th>User Login</th>
           <th>User Name</th>
           <th>Delete</th>
         </tr>
      </thead>
</table>

但在控制台窗口我收到错误：

未捕获的 TypeError：$.fn.dataTable.Editor 不是构造函数

我是否为此错过了任何 CDN？

我怎么了？

标签： jqueryajaxdatatable