javascript - 通过 Ajax 调用从 DataTable 中删除行

Question

我有一个 DataTables (datatables.net) 表设置，其中有一个自定义列，其中有不同类型操作的图标。

这些操作之一是删除，我不想将数据重新加载到表中，所以我想知道是否有任何内置函数用于在本地删除数据表行(因此我的脚本删除了服务器，然后我可以删除数据表中的同一行)。

经过一番研究，我发现了“fnDeleteRow”，但我不知道如何使用它。在我的脚本中，我有一个 ajax 调用，在成功事件中我想删除该行，但我无法确定单击了链接的行。下面是我现在所处的位置:

function Delete(id) {
    $.ajax({
        url: "ajax/ajax.php",
        type: "POST",
        data: {
            action: "delete",
            id: id
        },
        success: function(response){
            oTable = $('#table').DataTable();
            var row = oTable.closest('tr');
            var nRow = row[0];
            oTable.DataTable().fnDeleteRow(nRow);
        },
        error: function (response) {
            alert("Something went wrong.");
            console.log(response);
        },
    });
};

这会在控制台中打印以下内容:

TypeError: oTable.closest is not a function

我对 jQuery 还很陌生，不知道如何在我的案例中实现这一点。你们有人知道吗？我猜测即使成功事件中的脚本具有正确的语法，它也不会知道哪一行有首先单击的按钮/链接。我如何确保它确实有效？

编辑: 这就是我的数据表的启动方式，以防令人困惑:

function DrawTable() {
    $('#table').DataTable( {
        "cache": false,
        "columnDefs": [
            {
                "targets": [ 0, 1 ],
                "visible": false,
                "searchable": true
            }
        ]
    } );
}

我被告知要使用 jsfiddle，所以我上传了一个。从来没有使用过这个网站，我的标记是生成的，但我手动做了一个。 https://jsfiddle.net/nqeqxzub/9/

Answer 1

也许已经太晚了，但我还是会把它放出来。经过两天的网络搜索，我找到了一个简单的解决方案，没有任何 DataTable 函数

<td>
 <button type="button" id="{{$lead->id}}"  name="{{$lead->id}}" onclick="deleteRecord(this.id,this)" data-token="{{ csrf_token() }}">Delete</button>
 </td>

上面的这个单元格有一个 onclick 函数，它接受 2 个参数，第一个 (this.id) 是按钮的 id(来自数据库，将传递给 ajax 以更新数据库)，第二个 ( this) 这是按钮本身的索引(稍后我们将从其中提取行的索引)

function deleteRecord(mech_id,row_index) {
$.ajax({
        url:"{{action('MechanicController@destroy')}}",
        type: 'get',
        data: {
              "id": mech_id,
              "_token": token,
              },
        success: function ()
             {
              var i = row_index.parentNode.parentNode.rowIndex;
              document.getElementById("table1").deleteRow(i);
            }
     });  
}

现在在成功函数中，我使用了两行: 第一个是从按钮中提取行索引(2 个父级，因为我们必须从按钮的父级传递，在本例中，然后是行的父级)

第二行是从 table1 中删除索引行，这是我的表的名称