在 ASP.NET MVC 中使用 ajax 进行 CRUD 操作时，DataTable 插件不起作用

Question

我的代码有错误。我正在使用 datatable 插件，当我不使用 ajax 进行 CRUD 操作时效果很好，但使用 时它不起作用strong>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>

表格

模块 项目名 编辑 删除

控制台错误 enter image description here

Answer 1

当表头有一个没有标题的列<th></th>，但表本身中不存在该行<td></td>时出现此错误（在表的<tbody>中，这意味着缺少@987654324 @)。

所以检查你的表头并删除一列<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>'
                        }
                    },
                ]
            });
        }