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>时，会出现此错误表示缺少<td></td>）。

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

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

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

2 个答案: