Cannot read property 'cell' of undefined using data table

I was trying to apply datatable in asp.net but it throwing the error the code used for applying datatable. What I should do to solve my problem. I am searching but I didn’t find anything to solve it. I am looking forward to your advice. Thank you.

@model HRMS.Shared.Entities.EMSC32Model
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<link href="~/css/PageHeader.css" rel="stylesheet" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $('#myTable').DataTable({

            "searching": true,
            "lengthChange": true,
            "info": true,
            "aLengthMenu": [[10, 25, 75, -1], [10, 25, 75, "All"]],
            "iDisplayLength": 10,
            "pageLength": 10,
            "order": [[0, "desc"]],
            //"columnDefs": [{
            //    targets: "_all",
            //    orderable: true
            //}],
            "columns": [
                { id: '#cc' },
                { id: '#cd' },
               { id: '#cdh' },
               { id: '#a' }
            ]
        });
    });

</script>

<script type="text/javascript">

    function SHOW_TR_Function(e, e1, id) {
        //if (id != "") {
        //    CommonAjax("")
        //}

        var TRID = document.getElementById(e);
        var TRID1 = document.getElementById(e1);
        TRID.style.display = '';
        TRID1.style.display = "none";
    }
    function HIDE_TR_Function(e) {
        var TRID = document.getElementById(e);

        TRID.style.display = "none";

    }

    // for search in gridview
</script>


<style>
    * {
        box-sizing: border-box;
    }


    .backinput {
        background-image: url('~/images/searchicon.png');
        background-position: 10px 10px;
        background-repeat: no-repeat;
        width: 100%;
        font-size: 16px;
        padding: 12px 20px 12px 40px;
        border: 1px solid #ddd;
        margin-bottom: 12px;
    }
</style>


<script>
    function myFunction() {
        // Declare variables
        var input, filter, table, tr, td, i;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("myTable");
        tr = table.getElementsByTagName("tr");

        // Loop through all table rows, and hide those who don't match the search query
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td");
            for (j = 0; j < td.length; j++) {
                let tdata = td[j];
                if (tdata) {
                    if (tdata.innerHTML.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = "";
                        break;
                    } else {
                        tr[i].style.display = "none";
                    }
                }
            }
        }
    }

</script>

@if (ViewBag.Message != "" && ViewBag.Message != null)
{
    <p style="font-weight:bold;color:green;padding-left: 701px;font-size: 31px;"> @ViewBag.Message</p>

}

<div class="table-area">
    <div class="table-wrapper">
        <div class="table-title">
            <div class="row">
                <div class="col-sm-6">
                    <h2>Designation Master Details</h2>
                </div>
                <div class="col-sm-6">
                    <a class="btn btn-success" onclick="SHOW_TR_Function('traddpanel','traddpanelEdit')"><i class="material-icons"></i><span>Add New</span></a>
                </div>
            </div>
        </div>
        <input id="myInput" onkeyup="myFunction();" type="text" style="color:black" placeholder="Search.." class="form-control">
        <table class="table table-striped table-hover" id="myTable">
            <thead>
                <tr>
                    <th style="display:none">
                        <span class="custom-checkbox">
                            <input type="checkbox" id="selectAll">
                            <label for="selectAll"></label>
                        </span>
                    </th>
                    <th id="cc">  @Html.DisplayNameFor(model => model.DesignationMsts.DesignationCode)</th>
                    <th id="cd">  @Html.DisplayNameFor(model => model.DesignationMsts.Description)</th>
                    <th id="cdh">  @Html.DisplayNameFor(model => model.DesignationMsts.Desch)</th>

                    <th id="a">Actions</th>
                </tr>

                <tr id="traddpanel" style="display:none;background-color:#9fbfe7">
                    <td colspan="4">
                        <div>
                            <form action="/ESTABLISHMENT/EMSC32/Create" method="post">
                                <table width="1450">
                                    <tr style="background-color:#9fbfe7">
                                        <th style="width:162px">
                                            <input type="text" id="DesignationCode" placeholder="Code" class="form-control" readonly="readonly" />
                                        </th>
                                        <th>
                                            <input asp-for="@Model.DesignationMsts.Description" id="Description" name="Description" class="form-control" required />
                                        </th>
                                        <th>
                                            <input asp-for="@Model.DesignationMsts.Desch" id="Desch" name="Desch" class="form-control" required />
                                        </th>
                                        <th style="width:164px" id="asd">
                                            <input type="submit" value="Create" class="btn btn-primary m-btn" style="float:left;" />
                                            <button class="btn btn-primary m-btn" onclick="HIDE_TR_Function('traddpanel')">Close</button>
                                        </th>
                                    </tr>
                                </table>
                            </form>
                        </div>
                    </td>
                </tr>
                @if (Model.Status == "edit")
                {
                    <tr id="traddpanelEdit">
                        <td colspan="4" style="white-space:unset;">
                            <div style="overflow:hidden;">
                                <form asp-area="ESTABLISHMENT" asp-controller="EMSC32" asp-action="Edit?id=@Model.DesignationMsts.DesignationCode" method="post">
                                    <table width="1450" style="background-color:#9fbfe7">

                                        <tr style="background-color:#9fbfe7" overflow: hidden;>
                                            <th style="width:164px">
                                                @*<input type="hidden" asp-for="@Model.DesignationMsts.CreatedBy" name="CreatedBy" value="@Model.DesignationMsts.CreatedBy" />*@

                                                <input type="hidden" asp-for="@Model.DesignationMsts.DesignationCode" name="CadreCode" value="@Model.DesignationMsts.DesignationCode" />

                                                <input type="text" readonly="readonly" value="@Model.DesignationMsts.DesignationCode" asp-for="@Model.DesignationMsts.DesignationCode" name="DesignationCode" id="DesignationCode" placeholder="Code" class="form-control" />
                                            </th>
                                            <th>

                                                <input asp-for="@Model.DesignationMsts.Description" value="@Model.DesignationMsts.Description" name="Description" class="form-control" required />
                                            </th>
                                            <th>

                                                <input asp-for="@Model.DesignationMsts.Desch" value="@Model.DesignationMsts.Desch" name="Desch" class="form-control" required />
                                            </th>
                                            <th style="width:164px">

                                                <input type="submit" value="Update" class="btn btn-primary m-btn" style="float:left;" />
                                                <button class="btn btn-primary m-btn" onclick="HIDE_TR_Function('traddpanelEdit')">Close</button>
                                            </th>
                                        </tr>
                                        @*}
                                        else
                                        {
                                            <tr style="display:none;background-color:#9fbfe7">
                                                <th style="width:164px">
                                                    <input type="hidden" asp-for="@Model.DesignationMsts.DesignationCode" name="CadreCode" value="@Model.DesignationMsts.DesignationCode" />
                                                    <input type="hidden" asp-for="@Model.DesignationMsts.CreatedBy" name="CreatedBy" value="@Model.DesignationMsts.CreatedBy" />
                                                    <input type="text" id="DesignationCode" placeholder="Code" class="form-control" />
                                                </th>
                                                <th>

                                                    <input asp-for="@Model.DesignationMsts.Description" value="@Model.DesignationMsts.Description" name="Description" class="form-control" required />
                                                </th>
                                                @*<th>

                                                    <input asp-for="@Model.DesignationMsts.Desch" value="@Model.CaeMsts.Desch" name="Desch" class="form-control" required />
                                                </th>
                                                <th style="width:164px">

                                                    <input type="submit" value="Update" class="btn btn-primary m-btn" style="float:left;" />

                                                    <button class="btn btn-primary m-btn" onclick="HIDE_TR_Function('traddpanelEdit')">Close</button>
                                                </th>
                                            </tr>
                                        }*@
                                    </table>
                                </form>
                            </div>
                        </td>
                    </tr>
                }
            </thead>

            <tbody>
                @foreach (var item in Model.ListDesignation)
                {
                    <tr>
                        <td style="overflow:hidden;">
                            @Html.DisplayFor(modelItem => item.DesignationCode)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Description)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Desch)
                        </td>
                        <td>
                            <a href="/ESTABLISHMENT/EMSC32/Edit?id=@item.DesignationCode" class="edit" data-toggle="modal"><i asp-route-id="@item.DesignationCode" class="material-icons" data-toggle="tooltip" title="" data-original-title="Edit" onclick="SHOW_TR_Function('traddpanelEdit','traddpanel')"></i></a>
                            <a href="/ESTABLISHMENT/EMSC32/Delete?id=@item.DesignationCode" asp-route-id="@item.DesignationCode" class="delete" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="" data-original-title="Delete"></i></a>

                        </td>
                    </tr>
                }
            </tbody>

        </table>
        @*@foreach (var item in Model.ListDesignation)
        {
            @Html.LabelFor(model => model.DesignationMsts.DesignationCode, htmlAttributes: new { @class = "control-label " })
            @Html.DropDownList("UnitCodeList", ViewBag.DesignationCode as SelectList, new { @class = "form-control form-control2" })
            @Html.ValidationMessageFor(modelItem => item.DesignationCode, "", new { @class = "text-danger" })
        }*@

        @*@Html.DropDownListFor(m => m.DesignationCode, new SelectList(Model.Labs, "Value", "Text"), "Select", new { @class = "selectpicker" })*@

        @*@Html.DropDownListFor(modelItem => item.DesignationCode)*@

    </div>
    @if (Model.Status == "delete")
    {
        <div id="deleteEmployeeModal" class="modal" style="display:block!important">
            <div class="modal-dialog">
                <div class="modal-content">

                    <div class="modal-header">
                        <h4 class="modal-title">Confermation</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    </div>
                    <div class="modal-body">
                        <p>Are you sure you want to delete these Records?</p>
                        <p class="text-warning"><large>@Model.DesignationMsts.Description</large></p>
                    </div>
                    <div class="modal-footer">
                        <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
                        <a href="/ESTABLISHMENT/EMSC32/DeleteConfirmed?id=@Model.DesignationMsts.DesignationCode" class="btn btn-danger">Delete</a>
                    </div>

                </div>

            </div>

        </div>
    }

    <div class="clearfix">
        <div class="hint-text">Showing<b>25</b> entries</div>
        <!--<ul class="pagination">
            <li class="page-item disabled"><a href="#">Previous</a></li>
            <li class="page-item"><a href="#" class="page-link">1</a></li>
            <li class="page-item"><a href="#" class="page-link">2</a></li>
            <li class="page-item active"><a href="#" class="page-link">3</a></li>
            <li class="page-item"><a href="#" class="page-link">4</a></li>
            <li class="page-item"><a href="#" class="page-link">5</a></li>
            <li class="page-item"><a href="#" class="page-link">Next</a></li>
        </ul>-->
    </div>
</div>

Error:

jquery.min.js:2 Uncaught TypeError: Cannot read property ‘cell’ of undefined
at fa (jquery.dataTables.min.js:28)
at ha (jquery.dataTables.min.js:48)
at e (jquery.dataTables.min.js:93)
at HTMLTableElement. (jquery.dataTables.min.js:93)
at Function.each (jquery.min.js:2)
at w.fn.init.each (jquery.min.js:2)
at w.fn.init.n [as dataTable] (jquery.dataTables.min.js:83)
at w.fn.init.h.fn.DataTable (jquery.dataTables.min.js:165)
at HTMLDocument. (Index:1717)
at l (jquery.min.js:2)

23 thoughts on “Cannot read property 'cell' of undefined using data table”

Leave a Comment