从 Ajax 调用中删除数据表中的行答案

【问题标题】：Removing rows from DataTables from a Ajax call从 Ajax 调用中删除数据表中的行
【发布时间】：2016-07-27 15:20:06
【问题描述】：

我有一个 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/

【问题讨论】：

试试看这个页面datatables.net/forums/discussion/9312/fndeleterow-with-jquery最后评论
在初始化插件时存储对table api的引用，不要创建新的
@carlodenaro 我在发帖之前已经阅读过那个帖子，但我从来没有真正理解他使用“idindex”的最后一条评论。这一定是他的项目中的某些东西，在我看来，这与上下文无关
主要问题是DataTable()不返回jQuery对象，它返回插件APIdatatables.net/manual/api
@carlodenaro 我现在在问题中链接了一个 jsfiddle :)

标签： javascript jquery datatables

【解决方案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（来自 DB，将传递给 ajax 以更新 DB），第二个 ( 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 行：第一个是从按钮中提取行索引（2个父级，因为我们必须从按钮的父级传递，在这种情况下，然后是行的父级）

第二行是从 table1 中删除我们的索引的一个简单行，这是我的表的名称

【讨论】：