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)
Advertisement
Answer
There are several issues :
You have a mismatch between the number of header columns and body columns. They must be exactly the same.
If you want complex headers you must place the descriptive header (the header with captions matching all columns) as the very last (not first as above)
Playing with column visibility in inline CSS is a totally nogo. Why
<th style="display:none">anyway? Columns should be hidden withvisible: false
So basically: Turn the <tr>‘s in your <thead> section upside down and stop trying to manipulate visibility in CSS.