i have been trying to add jJQuery DataTables in my project. The UI elements for sorting and searching show up but sorting doesn't work out of the box like most tutorials say it should. i am using .net Core MVC 3.1
my .Net Core page layout file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - FouksAsg5Dealer</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link href="~/lib/datatables/css/jquery.dataTables.css" rel="stylesheet" />
<link href="~/lib/datatables/css/jquery.dataTables_themeroller.css" rel="stylesheet" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">FouksAsg5Dealer</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Car" asp-action="List">Cars</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="About">About</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2020 - Connor Fouks - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/lib/datatables/js/jquery.dataTables.js"></script>
<script src="~/js/adminCarTable.js" asp-append-version="true"></script>
@RenderSection("Scripts", required: false)
</body>
</html>the page itself:
@{
ViewData["Title"] = "List";
}
<h1>Admin Car List</h1>
<table id="adminCarTable" class="">
<thead>
<tr>
<th>ID</th>
<th>Make and Model</th>
<th>Year</th>
<th>Price</th>
<th>Mileage</th>
<th>Color</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
@foreach (var car in @Model)
{
<tbody>
<tr>
<td>@car.ID</td>
<td>@car.MakeModel</td>
<td>@car.Year</td>
<td>@car.Price</td>
<td>@car.Mileage</td>
<td>@car.Color</td>
<td>
<form asp-area="Admin" asp-controller="Car" asp-action="Edit" method="post" class="fillParent">
<input type="hidden" name="id" value="@car.ID" />
<input type="submit" value="Edit" class="btn btn-secondary fillParent" />
</form>
</td>
<td>
<form asp-area="Admin" asp-controller="Car" asp-action="Delete" method="post" class="fillParent">
<input type="hidden" name="id" value="@car.ID" />
<input type="submit" value="Delete" class="btn btn-danger" />
</form>
</td>
</tr>
</tbody>
}
</table>my custom java script file:
// turns the table into a sortable table.
$(document).ready(function () {
$('#adminCarTable').DataTable();
});Screen shot of the page loaded: screenshot of list with sorting UI and searchbox
The elements for the visual elements for the sort headers show up. They even toggle when clicked, but the table doesn't change. The drop down also show that only 10 records should be showing but all of my records are showing. any help would be greatly appreciated.
