jQuery 数据表 - 已删除的记录保留在表中

Question

调用存储过程将数据绑定到 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!');
}
});
}

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

Answer 1

解决方案：

我向 DOM 添加元素的方法就是问题所在。 成功解决如下：

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

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 添加元素，而是实际上将行添加到数据表中。 现在，删除功能完美运行。