我试图在asp.net中应用数据表，但是它引发了用于应用数据表的代码错误。我应该怎么做才能解决我的问题。我正在搜索，但没有找到任何解决方法。我期待着您的建议。谢谢。
@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>
错误：
jquery.min.js：2未捕获的TypeError：无法读取未定义的属性'cell' 在fa（jquery.dataTables.min.js：28） 在ha（jquery.dataTables.min.js：48） 在e（jquery.dataTables.min.js：93） 在HTMLTableElement。 （jquery.dataTables.min.js：93） 在Function.each（jquery.min.js：2） 在w.fn.init.each（jquery.min.js：2） 在w.fn.init.n [作为dataTable]（jquery.dataTables.min.js：83） 在w.fn.init.h.fn.DataTable（jquery.dataTables.min.js：165） 在HTMLDocument。 （索引：1717） 在l（jquery.min.js：2）
答案 0 :(得分：0)
有几个问题：
标题列和正文列的数量不匹配。它们必须完全相同。
如果要使用复杂的标题，则必须 将描述性标题（标题与所有列均匹配的标题）放置在最后（不是上面那样）
在嵌入式CSS中使用列可见性完全是徒劳的。为什么
<th style="display:none">反正？列应使用visible: false
所以基本上：将<tr>部分中的<thead>颠倒过来，并停止尝试操纵CSS的可见性。