ASP.NET MVC5 and DataTables

Thanks to Stack Overflow

http://stackoverflow.com/questions/28442960/asp-net-mvc5-and-datatables-for-a-beginner-what-goes-where

http://stackoverflow.com/questions/22546986/mvc-jquery-datatables-unable-to-get-property-classname-of-undefined-or-null-re

In BundleConfig.cs I added the following lines:

        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-1.10.2.min.js"));

        bundles.Add(new ScriptBundle("~/bundles/datatables").Include(
                    "~/Scripts/jquery.dataTables.js"));

In _Layout.cshtml I added the following to the head tag:

<link href="~/Content/jquery.dataTables.css" rel="stylesheet" type="text/css"/>
<link href="~/Content/jquery.dataTables_themeroller.css" rel="stylesheet" type="text/css" />
http://~/Scripts/jquery-1.10.2.min.js
http://~/Scripts/jquery.dataTables.js

Finally, at the bottom of Index.cshtml is the call to the script:

    $(document).ready( function () {
        $('#products').DataTable();
    } );

For DataTables to work, the <thead> is compulsory and <tbody> is optional. When you are going to add the <thead> tag, its better to add the <tbody> tag also

Advertisements