Я пытался добавить J JQuery DataTables в моем проекте. Элементы пользовательского интерфейса для сортировки и поиска отображаются, но сортировка не работает "из коробки", как говорят большинство уроков. Я использую. net Core MVC 3.1
my. Net Основной файл макета страницы:
<!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>
сама страница:
@{
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>
мой пользовательский java файл сценария:
// turns the table into a sortable table.
$(document).ready(function () {
$('#adminCarTable').DataTable();
});
Снимок экрана загруженной страницы: снимок экрана списка с пользовательским интерфейсом сортировки и окном поиска
Элементы визуальных элементов для Заголовки сортировки отображаются. Они даже переключаются при нажатии, но таблица не меняется. Раскрывающийся список также показывает, что должны отображаться только 10 записей, но отображаются все мои записи. любая помощь будет принята с благодарностью.