Плагин DataTable не работает при использовании операции CRUD с использованием ajax в ASP.NET MVC

Question

В моем коде есть ошибка. Я использую плагин для датированных данных , он работал хорошо, когда я не выполняю операцию CRUD с использованием ajax , но он не работает при использовании Операция CRUD ... Пожалуйста, помогите мне .... Заранее спасибо

Скрипт

$ (документ) .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

Я изменил функцию, теперь она работает ...

 $(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>'
                        }
                    },
                ]
            });
        }

Answer 2

Эта ошибка появляется, когда в заголовке таблицы есть столбец <th></th> без заголовка, но строка <td></td> для этого не существует в самой таблице (в <tbody> таблицы, что означает отсутствие * 1004).*).

Проверьте заголовок таблицы и удалите столбец <th></th> или добавьте строку <td></td> в <tbody>, и она должна работать.