javascript - 在 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>

表格

Module Project Name Edit Delete

控制台错误 enter image description here

Answer 1

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

因此请检查您的表格标题并删除一列 <th></th>或添加一行 <td></td>在 <tbody>它应该有效。