Where and How to Add DataTables to MVC 6 project?

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.

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"

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.

Here is my view that lists registered users. 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.

@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>

I thought about it and want to show my _Layout.cshtml file where references might be put.

<!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>&copy; 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>

I went to The DataTables download page and built a download and I added all sorts of script references right above the document ready function. One of the problems is jquery in _layout.chstml was at the bottom of the page, when it was needed at the top.

I downloaded the .zip put the DataTables-1.10.10 folder in the wwwroot folder.

In _Layout.chstml I put wwwroot/css/datatables.css and wwwroot/js/datatables.js (which were in the root of the .zip file.

In Index.chstml view I put the /datatables-1.10.10/js/jquery.datatables.js from the folder I installed from the .zip and the /datatables-1.10.10/js/jquery.datatables.css .

And right below that I put: /lib/jquery/dist/jquery.js

Many times so far with MVC I have discovered that the order of the script and link files have to be correctly located and sometimes the default _Layout.chstml file doesn't put them where they are needed. This basic install gave me the datatable with the default search box, pagination, and Order By arrows for each column. Pretty sweet. . .at least today in my life. Hope this helps someone else.

<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>