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.
JavaScript
x
315
315
1
@model HRMS.Shared.Entities.EMSC32Model2
@{3
ViewData["Title"] = "Index";4
Layout = "~/Views/Shared/_Layout.cshtml";5
}6
7
<link href="~/css/PageHeader.css" rel="stylesheet" />8
9
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>10
11
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">12
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">13
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">14
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">15
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">16
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">17
18
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>19
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>20
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>21
22
<script type="text/javascript">23
$(document).ready(function () {24
$('#myTable').DataTable({25
26
"searching": true,27
"lengthChange": true,28
"info": true,29
"aLengthMenu": [[10, 25, 75, -1], [10, 25, 75, "All"]],30
"iDisplayLength": 10,31
"pageLength": 10,32
"order": [[0, "desc"]],33
//"columnDefs": [{34
// targets: "_all",35
// orderable: true36
//}],37
"columns": [38
{ id: '#cc' },39
{ id: '#cd' },40
{ id: '#cdh' },41
{ id: '#a' }42
]43
});44
});45
46
</script>47
48
<script type="text/javascript">49
50
function SHOW_TR_Function(e, e1, id) {51
//if (id != "") {52
// CommonAjax("")53
//}54
55
var TRID = document.getElementById(e);56
var TRID1 = document.getElementById(e1);57
TRID.style.display = '';58
TRID1.style.display = "none";59
}60
function HIDE_TR_Function(e) {61
var TRID = document.getElementById(e);62
63
TRID.style.display = "none";64
65
}66
67
// for search in gridview68
</script>69
70
71
<style>72
* {73
box-sizing: border-box;74
}75
76
77
.backinput {78
background-image: url('~/images/searchicon.png');79
background-position: 10px 10px;80
background-repeat: no-repeat;81
width: 100%;82
font-size: 16px;83
padding: 12px 20px 12px 40px;84
border: 1px solid #ddd;85
margin-bottom: 12px;86
}87
</style>88
89
90
<script>91
function myFunction() {92
// Declare variables93
var input, filter, table, tr, td, i;94
input = document.getElementById("myInput");95
filter = input.value.toUpperCase();96
table = document.getElementById("myTable");97
tr = table.getElementsByTagName("tr");98
99
// Loop through all table rows, and hide those who don't match the search query100
for (i = 0; i < tr.length; i++) {101
td = tr[i].getElementsByTagName("td");102
for (j = 0; j < td.length; j++) {103
let tdata = td[j];104
if (tdata) {105
if (tdata.innerHTML.toUpperCase().indexOf(filter) > -1) {106
tr[i].style.display = "";107
break;108
} else {109
tr[i].style.display = "none";110
}111
}112
}113
}114
}115
116
</script>117
118
@if (ViewBag.Message != "" && ViewBag.Message != null)119
{120
<p style="font-weight:bold;color:green;padding-left: 701px;font-size: 31px;"> @ViewBag.Message</p>121
122
}123
124
<div class="table-area">125
<div class="table-wrapper">126
<div class="table-title">127
<div class="row">128
<div class="col-sm-6">129
<h2>Designation Master Details</h2>130
</div>131
<div class="col-sm-6">132
<a class="btn btn-success" onclick="SHOW_TR_Function('traddpanel','traddpanelEdit')"><i class="material-icons"></i><span>Add New</span></a>133
</div>134
</div>135
</div>136
<input id="myInput" onkeyup="myFunction();" type="text" style="color:black" placeholder="Search.." class="form-control">137
<table class="table table-striped table-hover" id="myTable">138
<thead>139
<tr>140
<th style="display:none">141
<span class="custom-checkbox">142
<input type="checkbox" id="selectAll">143
<label for="selectAll"></label>144
</span>145
</th>146
<th id="cc"> @Html.DisplayNameFor(model => model.DesignationMsts.DesignationCode)</th>147
<th id="cd"> @Html.DisplayNameFor(model => model.DesignationMsts.Description)</th>148
<th id="cdh"> @Html.DisplayNameFor(model => model.DesignationMsts.Desch)</th>149
150
<th id="a">Actions</th>151
</tr>152
153
<tr id="traddpanel" style="display:none;background-color:#9fbfe7">154
<td colspan="4">155
<div>156
<form action="/ESTABLISHMENT/EMSC32/Create" method="post">157
<table width="1450">158
<tr style="background-color:#9fbfe7">159
<th style="width:162px">160
<input type="text" id="DesignationCode" placeholder="Code" class="form-control" readonly="readonly" />161
</th>162
<th>163
<input asp-for="@Model.DesignationMsts.Description" id="Description" name="Description" class="form-control" required />164
</th>165
<th>166
<input asp-for="@Model.DesignationMsts.Desch" id="Desch" name="Desch" class="form-control" required />167
</th>168
<th style="width:164px" id="asd">169
<input type="submit" value="Create" class="btn btn-primary m-btn" style="float:left;" />170
<button class="btn btn-primary m-btn" onclick="HIDE_TR_Function('traddpanel')">Close</button>171
</th>172
</tr>173
</table>174
</form>175
</div>176
</td>177
</tr>178
@if (Model.Status == "edit")179
{180
<tr id="traddpanelEdit">181
<td colspan="4" style="white-space:unset;">182
<div style="overflow:hidden;">183
<form asp-area="ESTABLISHMENT" asp-controller="EMSC32" asp-action="Edit?id=@Model.DesignationMsts.DesignationCode" method="post">184
<table width="1450" style="background-color:#9fbfe7">185
186
<tr style="background-color:#9fbfe7" overflow: hidden;>187
<th style="width:164px">188
@*<input type="hidden" asp-for="@Model.DesignationMsts.CreatedBy" name="CreatedBy" value="@Model.DesignationMsts.CreatedBy" />*@189
190
<input type="hidden" asp-for="@Model.DesignationMsts.DesignationCode" name="CadreCode" value="@Model.DesignationMsts.DesignationCode" />191
192
<input type="text" readonly="readonly" value="@Model.DesignationMsts.DesignationCode" asp-for="@Model.DesignationMsts.DesignationCode" name="DesignationCode" id="DesignationCode" placeholder="Code" class="form-control" />193
</th>194
<th>195
196
<input asp-for="@Model.DesignationMsts.Description" value="@Model.DesignationMsts.Description" name="Description" class="form-control" required />197
</th>198
<th>199
200
<input asp-for="@Model.DesignationMsts.Desch" value="@Model.DesignationMsts.Desch" name="Desch" class="form-control" required />201
</th>202
<th style="width:164px">203
204
<input type="submit" value="Update" class="btn btn-primary m-btn" style="float:left;" />205
<button class="btn btn-primary m-btn" onclick="HIDE_TR_Function('traddpanelEdit')">Close</button>206
</th>207
</tr>208
@*}209
else210
{211
<tr style="display:none;background-color:#9fbfe7">212
<th style="width:164px">213
<input type="hidden" asp-for="@Model.DesignationMsts.DesignationCode" name="CadreCode" value="@Model.DesignationMsts.DesignationCode" />214
<input type="hidden" asp-for="@Model.DesignationMsts.CreatedBy" name="CreatedBy" value="@Model.DesignationMsts.CreatedBy" />215
<input type="text" id="DesignationCode" placeholder="Code" class="form-control" />216
</th>217
<th>218
219
<input asp-for="@Model.DesignationMsts.Description" value="@Model.DesignationMsts.Description" name="Description" class="form-control" required />220
</th>221
@*<th>222
223
<input asp-for="@Model.DesignationMsts.Desch" value="@Model.CaeMsts.Desch" name="Desch" class="form-control" required />224
</th>225
<th style="width:164px">226
227
<input type="submit" value="Update" class="btn btn-primary m-btn" style="float:left;" />228
229
<button class="btn btn-primary m-btn" onclick="HIDE_TR_Function('traddpanelEdit')">Close</button>230
</th>231
</tr>232
}*@233
</table>234
</form>235
</div>236
</td>237
</tr>238
}239
</thead>240
241
<tbody>242
@foreach (var item in Model.ListDesignation)243
{244
<tr>245
<td style="overflow:hidden;">246
@Html.DisplayFor(modelItem => item.DesignationCode)247
</td>248
<td>249
@Html.DisplayFor(modelItem => item.Description)250
</td>251
<td>252
@Html.DisplayFor(modelItem => item.Desch)253
</td>254
<td>255
<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>256
<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>257
258
</td>259
</tr>260
}261
</tbody>262
263
</table>264
@*@foreach (var item in Model.ListDesignation)265
{266
@Html.LabelFor(model => model.DesignationMsts.DesignationCode, htmlAttributes: new { @class = "control-label " })267
@Html.DropDownList("UnitCodeList", ViewBag.DesignationCode as SelectList, new { @class = "form-control form-control2" })268
@Html.ValidationMessageFor(modelItem => item.DesignationCode, "", new { @class = "text-danger" })269
}*@270
271
@*@Html.DropDownListFor(m => m.DesignationCode, new SelectList(Model.Labs, "Value", "Text"), "Select", new { @class = "selectpicker" })*@272
273
@*@Html.DropDownListFor(modelItem => item.DesignationCode)*@274
275
</div>276
@if (Model.Status == "delete")277
{278
<div id="deleteEmployeeModal" class="modal" style="display:block!important">279
<div class="modal-dialog">280
<div class="modal-content">281
282
<div class="modal-header">283
<h4 class="modal-title">Confermation</h4>284
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>285
</div>286
<div class="modal-body">287
<p>Are you sure you want to delete these Records?</p>288
<p class="text-warning"><large>@Model.DesignationMsts.Description</large></p>289
</div>290
<div class="modal-footer">291
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">292
<a href="/ESTABLISHMENT/EMSC32/DeleteConfirmed?id=@Model.DesignationMsts.DesignationCode" class="btn btn-danger">Delete</a>293
</div>294
295
</div>296
297
</div>298
299
</div>300
}301
302
<div class="clearfix">303
<div class="hint-text">Showing<b>25</b> entries</div>304
<!--<ul class="pagination">305
<li class="page-item disabled"><a href="#">Previous</a></li>306
<li class="page-item"><a href="#" class="page-link">1</a></li>307
<li class="page-item"><a href="#" class="page-link">2</a></li>308
<li class="page-item active"><a href="#" class="page-link">3</a></li>309
<li class="page-item"><a href="#" class="page-link">4</a></li>310
<li class="page-item"><a href="#" class="page-link">5</a></li>311
<li class="page-item"><a href="#" class="page-link">Next</a></li>312
</ul>-->313
</div>314
</div>315
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.