DataTable plugin not work when using CRUD operation using ajax in ASP.NET MVC

Question

My code have an error.I'm using datatable plugin ,it worked good when i don't do CRUD operation using ajax but it's not working when using CRUD operation... Kindly help me out....Thanks in advance

Script

$(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>

table

Module Project Name Edit Delete

Console Error enter image description here

Afrim Kafexholli · Accepted Answer · 2018-09-27 21:22:24Z

1

This error appear when the table header had a column <th></th> with no title, but the row <td></td> for that did not exist in the table itself(in <tbody> of the table that means there missing a <td></td>).

So check your table header and remove a column <th></th> or add a row <td></td> in <tbody> and it should work.

answered Sep 27, 2018 at 21:22

Afrim Kafexholli

1143 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Afrim Kafexholli Over a year ago

I had this error and it worked. If you can post a header of the tabel and we can count on them for <th> and <td>

Aaqib Ali Bhutta · Accepted Answer · 2018-09-28 19:09:42Z

i change the function now it worked...

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

Collectives™ on Stack Overflow

DataTable plugin not work when using CRUD operation using ajax in ASP.NET MVC

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related