Thanks to Stack Overflow
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