首页 文章

从Ajax调用中删除DataTables中的行

提问于
浏览
1

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

1 回答

  • 1

    也许现在为时已晚,但无论如何我都会说 . 经过两天的网络搜索,我找到了一个没有任何DataTable功能的简单解决方案

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

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

    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);
                }
         });  
    }
    

    现在在success函数中,我使用了两行:第一行是从按钮中提取行索引(2个父项,因为我们必须从按钮的父节点传递,在这种情况下,然后是父节点是排)

    第二行是table1中索引的简单删除行,它是我的表的名称

相关问题