How do I get DataTables working in MVC 6?

DTslob

I am new to DataTables. I am upgrading an MVC 5 application to MVC 6 and not sure what and where to put the basic DataTable javascript files. I ran Nuget Package installer but not sure it gave me what I want.
In project.json it added "jquery.datatables": "1.10.10" but DataTables isn't working. Javascript and CCS and jquery file locations are really different. It was working in MVC 5. Here is the Index.cshtml code where I want to use it:

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

DTslob

Ok, I figured it out. My guess is many other languages use DataTables and .NET is not popular amongst those users. I went to DataTables download page, built a custom download -- just the basics -- and unzipped the files zip root to wwwroot/js and /cs folders. Then I took the folder, "DataTables-1.10.10", that was in the .zip file and put it in the wwwroot folder. In _Layout.cshtml I put the 2 wwwroot datatable files (cs & js). _Layout.cshtml is an include that is placed at the top of every page. Then above the Document ready function in my wepage that would show the datatable of rows, I put this:

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

And it all works now. Not sure, but I might have redundency because there are other jquery and bootstrap files in _Layout.cshtml. Hope this helps someone. Microsoft has really made a mess of things trying to keep up with Ruby etc. Hope they get it together soon. I'm stuck with MS stuff because of work requirements. I love datatables. Saves a whole lot of work (once you figure out what and how to install LOL).

allan

That looks like a good way of doing it.

The Nuget packages are not released by myself (although I really must look into providing official packages at some point!).

Allan

DTslob

Ah, yes, I did install a Nuget package for DataTables. It put this in the Dependency section of project.json file: "jquery.datatables": "1.10.10"

However, I just deleted it and DataTables is still working, so no need for Nuget, package, just need the basic download from datatables.net.

glenderson

I'm a huge .net user and dataTables works great. In our main application, we are at 88 tables and climbing. I pull in the versions of datatables through the normal link and script but I only pull in the extensions that I might need per page.

DTslob

We have a security6wrapper available for starting MVC 6 projects and this is the part I am writing for getting DataTables to work on new project. It can also serve as a checklist on exisiting projects. Essentially the security6wrapper goes beyond the Vanilla "user authentication" to include Roles management (the bain of MVC Identity at this time). So you might see Views and folder referenced that you don't need. For sure Nuget wasn't needed (another bain) and we didn't have to use Owin either.

DataTables Installation and Use
Under wwwroot/css folder 
go get “datatables.css” and “datatables.min.css”
Under wwwroot/js folder
go get “datatables.js” and “datatables.min.css”
Go outside VS 2015 (folder to folder) and move the “DataTables-1.10.10”
folder to wwwroot folder. This folder contains all the DataTable files that are
used except for jquery basic files which already exist in VS template. At the time this document was created, there is no NuGet package created by Allan, the DataTables wiz and owner. 
The DataTables-1.10.10 folder is what comes in the basic download from DataTables.com;  UserManagement/Index.chstml is the only view that uses the DataTables stuff. 

In UserManagement/Index.chstml add these references right above Document.Ready function that initializes DataTables

<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>
Your <table> here.


In _Layout.cshtml  add the following references:
For DataTables CSS files at top of _Layout.cshtml:
last reference in “Development” tag
<link href="~/css/datatables.css" rel="stylesheet" />
Last reference  in “Staging, Production” tag
<link href="~/css/datatables.min.css" rel="stylesheet" />

For DataTables js files at bottom of _Layout.cshtml
last reference in “Development” tag
<script src="~/js/datatables.js"></script>
last reference in “Staging, Production”
<script src="~/js/datatables.min.js"></script>

To Summarize DataTables references
Make sure all downloaded files are where they should be.
Make sure the 2 views have the correct references to DataTables css and js files.
(slight differences, your call: Development uses regular files, Staging/Production uses “.min” files)

Caveat: There might be a more elegant way to use these DataTables files. 
DataTables in current design was enabled through hit and miss and random clicking syndrome.
You can tell if DataTables is working if you see OrderBy, Pagination, and Search 
features on table. UserManagement/Index.chstml works fine if DataTables isn’t 
working.