I am using a asp.net mvc web app. I have created a table and now I am wanting to use the plugin in
But am getting this... so I am missing the look of the datatable plugin and the following Error.
Cannot set properties of undefined (setting '_DT_CellIndex')
my view:
@model List<Fright>
@{
ViewData["Title"] = "Home Page";
var result = Model.GroupBy(gb => gb.Value);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="//cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js" defer></script>
<script>
$(document).ready(function () {
$('#homeTable').DataTable();
});
</script>
</head>
<body>
<div>
<table id="homeTable" class="display" style="width:100%">
<thead>
<tr>
<th>Value</th>
<th>Option</th>
</tr>
</thead>
<tbody>
@foreach (var item in result)
{
var url = "/frightSummary/SummaryIndex?id=" item.Key;
<tr>
<td>
<a href=@url>@item.Key</a>
</td>
</tr>
}
</tbody>
</table>
</div>
</body>
</html>
CodePudding user response:
Your problem is a mismatch in the number of <td> </td>
. You are just rendering 1 <td>
in foreach
loop but you have two <th></th>
in the table header
@model List<Fright>
@{
ViewData["Title"] = "Home Page";
var result = Model.GroupBy(gb => gb.Value);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="//cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js" defer></script>
<script>
$(document).ready(function () {
$('#homeTable').DataTable();
});
</script>
</head>
<body>
<div>
<table id="homeTable" class="display" style="width:100%">
<thead>
<tr>
<th>Value</th>
<th>Option</th>
</tr>
</thead>
<tbody>
@foreach (var item in result)
{
var url = "/frightSummary/SummaryIndex?id=" item.Key;
<tr>
<td>
<a href=@url>@item.Key</a>
</td>
<td>
<a href=@url>@item.Option</a> /* output you Option value*/
</td>
</tr>
}
</tbody>
</table>
</div>
</body>
</html> ```