我试图让DataTables在MVC 6项目中工作。我已经完成了整个项目，但在尝试列出用户时，它并没有使用DataTables。
我不确定添加到MVC 6项目的位置和内容。一切都在不同的位置。我运行Nuget包管理器并发现了一些内容，并将其添加到我的project.json文件中：“jquery.datatables”：“1.10.10”
但DataTables无效。我知道这是对我的问题的可怕描述，但我很确定我在正确的位置没有正确的.js和.css文件。但是，访问DataTables下载网站没有任何帮助，因为有数百万的选择可供下载。
以下是我列出注册用户的视图。它可以正常工作，但不使用DataTables，如果找不到DataTable，则不会触发警报。 DataTables的默认安装内置了搜索框和OrderBy箭头。当前视图中没有一个 - 它可以工作但没有DataTables。
@model List<MVC6.Models.UserViewModel>
@{
ViewBag.Title = "Users";
}
<ol class="breadcrumb">
<li>@Html.ActionLink("Administration", "Index", "Admin")</li>
<li>Users</li>
</ol>
<h2>@ViewBag.Title</h2>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
try {
$('#users').dataTable({});
} catch (err) {
alert(err + ":\n Datatables installed? Included in Resource bundle?");
}
});
</script>
@if (!ViewData.ModelState.IsValid)
{
<div class="alert alert-danger" role="alert">
<div asp-validation-summary="ValidationSummary.All"></div>
@*@Html.ValidationSummary()*@
</div>
}
<fieldset>
<table id="users" class="display">
<thead>
<tr>
<th width="20%">Email</th>
<th width="20%">Roles</th>
<th width="20%">Action</th>
</tr>
</thead>
<tbody>
@if (null != Model)
{
foreach (var user in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => user.Email)
</td>
<td>
@if (null != user.Roles)
{
@*foreach (var role in user.Roles)
{
@role
<br />
}*@
@user.Roles
}
</td>
<td>
<div class="btn-group" role="group" aria-label="...">
@Html.ActionLink("Edit", "Edit", new { userId = user.UserId }, new { @class = "btn btn-default" })
@Html.ActionLink("Delete", "Delete", new { userId = user.UserId }, new { onclick = "return confirm('Are you sure you want to delete this user?')", @class = "btn btn-default" })
</div>
</td>
</tr>
}
}
</tbody>
</table>
</fieldset>
我考虑过这一点，并希望显示我的_Layout.cshtml文件，其中可能会放置引用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - MVC6</title>
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a asp-controller="Home" asp-action="Index" class="navbar-brand">MVC6</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a asp-controller="Home" asp-action="Index">Home</a></li>
<li><a asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-controller="Home" asp-action="Contact">Contact</a></li>
</ul>
@await Html.PartialAsync("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© 2016 - MVC6</p>
</footer>
</div>
<environment names="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment names="Staging,Production">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
@RenderSection("scripts", required: false)
</body>
</html>
答案 0 :(得分：0)
我去了The DataTables download page并构建了一个下载，我在文档就绪函数的正上方添加了各种脚本引用。其中一个问题是_layout.chstml中的jquery位于页面底部，当顶部需要它时。
我下载了.zip，将DataTables-1.10.10文件夹放在wwwroot文件夹中。
在_Layout.chstml中我放了wwwroot / css / datatables.css和wwwroot / js / datatables.js（它们位于.zip文件的根目录中。
在Index.chstml视图中，我从.zip和/datatables-1.10.10/js/jquery.datatables.css中安装了我安装的文件夹中的/datatables-1.10.10/js/jquery.datatables.js
就在我的下方： /lib/jquery/dist/jquery.js
到目前为止，MVC很多次发现脚本和链接文件的顺序必须正确定位，有时默认的_Layout.chstml文件不会将它们放在需要的位置。这个基本安装为我提供了数据表，每个列都有默认搜索框，分页和Order By箭头。很甜蜜。 。至少在我今生的今天。希望这有助于其他人。
<h2>@ViewBag.Title</h2>
<link href="~/datatables-1.10.10/css/jquery.datatables.css" rel="stylesheet" />
<script src="~/datatables-1.10.10/js/jquery.datatables.js"></script>
<script src="/lib/jquery/dist/jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
alert("inside document ready");
try {
$('#users').dataTable({});
} catch (err) {
alert(err + ":\n Datatables installed? Included in Resource bundle?");
}
});
</script>