jQuery Datatable - 删除的记录保留在表中答案

【问题标题】：jQuery Datatable - Deleted Record Remains in the tablejQuery Datatable - 删除的记录保留在表中
【发布时间】：2018-03-21 03:24:24
【问题描述】：

调用存储过程将数据绑定到 jQuery 数据表 (v1.10.16)。删除记录时，Ajax 调用成功地从数据库中删除了该记录。在删除的回调中，我重新绑定了 jQuery 数据表，但我刚刚删除的记录仍然存在。如果我刷新页面，我刚刚删除的记录已经不在数据表中了。

 function DeleteFundingSource(id)
{       
     function callBack(response) {
        if (response.d == 'OK') {
            $('#<%=lblMessage.ClientID%>').text("Funding Source Archived Successfully");
            if ($('#<%=lblMessage.ClientID%>').hasClass("bg-danger"))
                $('#<%=lblMessage.ClientID%>').removeClass("bg-danger");

            $('#<%=lblMessage.ClientID%>').addClass("bg-success");

              GetFundingSources();  //rebind the grid
        }
        else {
            $('#<%=lblMessage.ClientID%>').text(response.d);
            if ($('#<%=lblMessage.ClientID%>').hasClass("bg-success"))
                $('#<%=lblMessage.ClientID%>').removeClass("bg-success")
            $('#<%=lblMessage.ClientID%>').addClass("bg-danger");

        }
     }

    $.ajax({
        type: 'GET',
        url: '../services/Inv_WS.asmx/DeleteFundingSource',
        data: { ID: JSON.stringify(id) },
        dataType: 'json',
        contentType: "application/json",
        success: function (data) {
            callBack(data);
        },
        error: function () {
            $("#loading").hide();
            alert('Failed to load data in DataTable!');
        }
    });

}


 function GetFundingSources() {
     $.ajax({
        type: 'GET',
        url: '../services/Inv_WS.asmx/GetFundingSource',
        dataType: 'json',
        contentType: "application/json",
         success: function (data) {
            $.each(data, function () {
                $.each(this, function (k, v) {
                    body = "<tr>";
                    body += "<td><span class='glyphicon glyphicon-pencil' title='Edit'></span></td>";
                    body += "<td>" + v.Name + "<input id='hidID' type='hidden' value='" + v.ID + "' ></td>";
                    body += "<td><span class='glyphicon glyphicon-remove' OnClick='DeleteFundingSource(" + v.ID + "); return false;' title='Delete'></span></td>";
                    body += "</tr>";
                    $("#tblFund tbody").append(body);
                });
            });

            /*DataTables instantiation.*/
           var t= $("#tblFund").DataTable();
           t.draw(true);

        },
        error: function (xhr, ajaxOptions, thrownError) {
            $("#loading").hide();
            alert('Failed to load data in DataTable!');
        }
    });
}

我在添加新记录或编辑现有记录时使用相同的方法，这些操作成功执行并且数据表相应地反映了更改。

【问题讨论】：

控制台有什么错误吗？
控制台没有错误。
您是否交叉检查了您的 ajax 调用在删除后是否返回了正确的数据？

标签： jquery ajax stored-procedures datatables

【解决方案1】：

解决方案：

我向 DOM 添加元素的方法是问题所在。像这样成功解决：

在我的函数范围之外，我添加了一个新变量：var table;

 function GetFundingSources() {
    table = $("#tblFund").DataTable();
    table.clear();

    $.ajax({
        type: 'GET',
        url: '../services/Inv_WS.asmx/GetFundingSource',
        dataType: 'json',
        contentType: "application/json",
        success: function (data) {
            $.each(data, function () {
                $.each(this, function (k, v) {
                    body = "<tr>";
                    body += "<td><span class='glyphicon glyphicon-pencil' title='Edit'></span></td>";
                    body += "<td>" + v.Name + "<input id='hidID' type='hidden' value='" + v.ID + "' ></td>";
                    body += "<td><span class='glyphicon glyphicon-remove' OnClick='DeleteFundingSource(" + v.ID + "); return false;' title='Delete'></span></td>";
                    body += "</tr>";
                    table.row.add($(body).get(0)).draw(); 
                });
            });

        },
        error: function () {
            $("#loading").hide();
         //   alert('Failed to load data in DataTable!');
        }
    });
}

解决办法的关键是一行：

table.row.add($(body).get(0)).draw();

这种方法实际上不是向 DOM 添加元素，而是向数据表添加行。现在删除功能完美无缺。

【讨论】：