在 MVC 中使用 ajax 的 CRUD 操作时，数据表插件不起作用 ASP.NET

Question

我的代码有错误。我正在使用数据表插件，当我不使用ajax进行 CRUD 操作时它效果很好，但在使用CRUD 操作时它不起作用...... 请帮帮我...提前致谢

脚本

$(document(.ready(function (( {

$("table#tableSort").DataTable();
});
$("#loadingModule").html("Loading.....");
$.get("/Setup/ModuleList", null, DataBind);
function DataBind(modulelistfull) {
var SetData = $("#setModuleList");
for (var i = 0; i < modulelistfull.length; i++) {
var Data = "<tr class='row_" + modulelistfull[i].id + "'>" +
"<td>" + modulelistfull[i].Module + "</td> " +
"<td>" + modulelistfull[i].ProjectID + "</td> " +                    
"<td class='text-center' onclick='EditModule(" + modulelistfull[i].id + ")'>"
+ "<i class='fa fa-edit pa-5 text-warning'></i>" +
"</td>" +
" <td class='text-center' onclick='DeleteModule(" + modulelistfull[i].id + ")' >"
+ "<i class='fa fa-trash pa-5 text-danger' ></i>" +
"</td>" +
"</tr>";
SetData.append(Data);
$("#loadingModule").html("");
}
}
// show the popup modal for add new Status
function AddNewModule(id) {
$("#form")[0].reset();
$("#ModalTitle").html("Add New Module");
$("#MyModal").modal();
}
// show the popup modal for Edit Status
function EditModule(id) {
var url = "/Setup/GetModuleById?ModuleId=" + id;
$("#ModalTitle").html("Update Module Details");
$("#MyModal").modal();
$.ajax({
type: "GET",
url: url,
success: function (data) {
var obj = JSON.parse(data);
$("#ModuleID").val(obj.id);
$("#Module").val(obj.Module);
$("#ProjectID option:selected").text(obj.ProjectID);
$("#ProjectID option:selected").val(obj.ProjectID.Project.SourceCode);
}
})
}
$("#SaveModuleDetail").click(function () {
var data = $("#SubmitForm").serialize();
$.ajax({
type: "Post",
url: "/Setup/SaveModuleDataInDb",
data: data,
success: function (result) {
if (result == true) {
alert("Success!...");
}
else {
alert("Something went be wrong!...");
}
$("#MyModal").modal("hide");
window.location.href = "/Setup/Module";
}
})
})
//Show The Popup Modal For DeleteComfirmation
var DeleteModule = function (Id) {
$("#ModuleID").val(Id);
$("#DeleteConfirmation").modal("show");
}
var ConfirmDelete = function () {
var ModuleID = $("#ModuleID").val();
$.ajax({
type: "POST",
url: "/Setup/DeleteModuleRecord?Id=" + ModuleID,
success: function (result) {
$("#DeleteConfirmation").modal("hide");
$(".row_" + ModuleID).remove();
}
})
}
</script>

表

模块 项目名称 编辑 删除

控制台错误 在此处输入图像描述

Answer 1

当表头具有没有标题的列<th></th>，但表本身中不存在<td></td>行时，会出现此错误(在表的<tbody>，这意味着缺少<td></td>(。

因此，请检查您的表头并删除列<th></th>或在<tbody>中添加一行<td></td>，它应该可以工作。

Answer 2

我现在改变了功能，它起作用了......

$(document).ready(function () {
GetModuleList();
$("#btnSubmit").click(function () {
var myformdata = $("#form").serialize();
$.ajax({
type: "POST",
url: "/Setup/SaveModuleDataInDb",
data: myformdata,
success: function (result) {
if (result == true) {
alert("Success!...");
}
else {
alert("Something went be wrong!...");
}
$("#MyModal").modal("hide");
window.location.href = "/Setup/Module";
}
})
})
});
var GetModuleList = function () {
$.ajax({
type: "Get",
url: "/Setup/ModuleList",
success: function (response) {
BindDataTable(response);
}
})
}
var BindDataTable = function (response) {
$("#tableSort").DataTable({
"aaData": response,
"aoColumns": [
{ "mData": "Module" },
{ "mData": "ProjectID" },
{
"mData": "id",
"render": function (id, type, full, meta) {
return '<div class="text-center" onclick="AddEditEmployee(' + id +')"><a href="#" class="text-center" ><i class="fa fa-edit pa-5 text-warning"></i></a></div>'
}
},
{
"mData": "id",
"render": function (id, type, full, meta) {
return '<div class="text-center" onclick="DeleteModule(' + id + ')"><a href="#"><i class="fa fa-trash text-center pa-5 text-danger"></i></a></div>'
}
},
]
});
}