Where and How to Add DataTables to MVC 6 project?
<p>I am attempting to get DataTables working in MVC 6 project. I've got the whole project working but when trying to list users it doesn't use the DataTables.</p>

<p>I'm not sure where and what to add to the MVC 6 project. Everything is in a different location. I ran the Nuget Package Manager and found something and it added this to my project.json file: "jquery.datatables": "1.10.10"</p>

<p>But DataTables isn't working. I know this is a terrible description of my problem but I'm pretty sure I just don't have the right .js and .css files in the right locations. But going to the DataTables downloads website is no help because there are million choices to download.</p>

<p><strong>Here is my view that lists registered users.</strong> It works, but doesn't use DataTables and doesn't trigger an Alert if DataTables not found. The default install of DataTables has built in search box and OrderBy arrows. There are none with current view -- which works but without DataTables.</p>

<pre><code>@model List&lt;MVC6.Models.UserViewModel&gt;

@{
    ViewBag.Title = "Users";
}

&lt;ol class="breadcrumb"&gt;
    &lt;li&gt;@Html.ActionLink("Administration", "Index", "Admin")&lt;/li&gt;
    &lt;li&gt;Users&lt;/li&gt;
&lt;/ol&gt;
&lt;h2&gt;@ViewBag.Title&lt;/h2&gt;

&lt;script type="text/javascript" language="javascript"&gt;
    $(document).ready(function () {
        try {
            $('#users').dataTable({});
        } catch (err) {
            alert(err + ":\n Datatables installed?  Included in Resource bundle?");
        }
    });
&lt;/script&gt;

@if (!ViewData.ModelState.IsValid)
{
    &lt;div class="alert alert-danger" role="alert"&gt;
        &lt;div asp-validation-summary="ValidationSummary.All"&gt;&lt;/div&gt;

        @*@Html.ValidationSummary()*@
    &lt;/div&gt;


}

&lt;fieldset&gt;
    &lt;table id="users" class="display"&gt;

        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th width="20%"&gt;Email&lt;/th&gt;
                &lt;th width="20%"&gt;Roles&lt;/th&gt;
                &lt;th width="20%"&gt;Action&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
            @if (null != Model)
            {
                foreach (var user in Model)
                {
                    &lt;tr&gt;
                        &lt;td&gt;
                            @Html.DisplayFor(modelItem =&gt; user.Email)

                        &lt;/td&gt;
                        &lt;td&gt;
       @if (null != user.Roles)
        {
            @*foreach (var role in user.Roles)
            {
                @role
                &lt;br /&gt;
            }*@
           @user.Roles
       }
                        &lt;/td&gt;
                        &lt;td&gt;
                            &lt;div class="btn-group" role="group" aria-label="..."&gt;
                                @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" })

                            &lt;/div&gt;
                        &lt;/td&gt;
                    &lt;/tr&gt;
                }
            }
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/fieldset&gt;
</code></pre>

<p><strong>I thought about it and want to show my _Layout.cshtml file where references might be put.</strong></p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset="utf-8" /&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
        &lt;title&gt;@ViewData["Title"] - MVC6&lt;/title&gt;

        &lt;environment names="Development"&gt;
            &lt;link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" /&gt;
            &lt;link rel="stylesheet" href="~/css/site.css" /&gt;
        &lt;/environment&gt;
        &lt;environment names="Staging,Production"&gt;
            &lt;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" /&gt;
            &lt;link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" /&gt;
        &lt;/environment&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
            &lt;div class="container"&gt;
                &lt;div class="navbar-header"&gt;
                    &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                        &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                        &lt;span class="icon-bar"&gt;&lt;/span&gt;
                        &lt;span class="icon-bar"&gt;&lt;/span&gt;
                        &lt;span class="icon-bar"&gt;&lt;/span&gt;
                    &lt;/button&gt;
                    &lt;a asp-controller="Home" asp-action="Index" class="navbar-brand"&gt;MVC6&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="navbar-collapse collapse"&gt;
                    &lt;ul class="nav navbar-nav"&gt;
                        &lt;li&gt;&lt;a asp-controller="Home" asp-action="Index"&gt;Home&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a asp-controller="Home" asp-action="About"&gt;About&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a asp-controller="Home" asp-action="Contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                    @await Html.PartialAsync("_LoginPartial")
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="container body-content"&gt;
            @RenderBody()
            &lt;hr /&gt;
            &lt;footer&gt;
                &lt;p&gt;&amp;copy; 2016 - MVC6&lt;/p&gt;
            &lt;/footer&gt;
        &lt;/div&gt;

        &lt;environment names="Development"&gt;
            &lt;script src="~/lib/jquery/dist/jquery.js"&gt;&lt;/script&gt;
            &lt;script src="~/lib/bootstrap/dist/js/bootstrap.js"&gt;&lt;/script&gt;
            &lt;script src="~/js/site.js" asp-append-version="true"&gt;&lt;/script&gt;
        &lt;/environment&gt;
        &lt;environment names="Staging,Production"&gt;
            &lt;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"&gt;
            &lt;/script&gt;
            &lt;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 &amp;&amp; window.jQuery.fn &amp;&amp; window.jQuery.fn.modal"&gt;
            &lt;/script&gt;
            &lt;script src="~/js/site.min.js" asp-append-version="true"&gt;&lt;/script&gt;
        &lt;/environment&gt;

        @RenderSection("scripts", required: false)
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>