36 DataTables scripts and styles as bundles

1. Update Bootstrap and JQuery packages

   • Update Bootstrap to version 3.3.7 (Do not update to version 4, it is not compatible with Bootstrap 3, If you have version 4 installed, downgrade it to version 3.3.7)
   • Update JQuery package to the latest update

2. Install DataTables package using NuGet Package Manager (skip this step if it is already installed)

   When the installation is complete, two folders are created:
   /Content/DataTables which includes images and css files
   /Script/DataTables which includes JavaScript files

3. Add the following lines of code to the end of the RegisterBundles() method in the /App_Start/BundleConfig.cs file

public static void RegisterBundles(BundleCollection bundles)
{
...
...

// DataTables JavaScript Bundle
bundles.Add(new ScriptBundle("~/bundles/jsdatatables").Include(
            "~/Scripts/DataTables/jquery.dataTables.js",
            "~/Scripts/DataTables/dataTables.scroller.js",
            "~/Scripts/DataTables/dataTables.bootstrap.js"
            ));

// DataTables CSS Styles Bundle
bundles.Add(new StyleBundle("~/bundles/cssdatatables").Include(
            "~/Content/DataTables/css/dataTables.scroller.css",
            "~/Content/DataTables/css/dataTables.bootstrap.css"
            ));
}

4. Add the following to the /Views/Shared/_Layout.cshtml file

Put the cssdatatables bundle in the header of the layout file. The order of the bundles is important.

@Styles.Render("~/bundles/cssdatatables")
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@RenderSection("styles", required: false)

Put the jsdatatables bundle as follows at the end of the body of the layout file as follows. The order of the bundles is important

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/jsdatatables")
@RenderSection("scripts", required: false)

5. Comment the scripts and styles tags related to datatables that were added to your index views (If they were added previously)

@*
<script type="text/javascript" src="@Url.Content("/Scripts/DataTables/jquery.dataTables.min.js")"></script>
<script type="text/javascript" src="@Url.Content("/Scripts/DataTables/dataTables.scroller.min.js")"></script>
<script type="text/javascript" src="@Url.Content("/Scripts/DataTables/dataTables.bootstrap.min.js")"></script>
*@

and

@*
@section styles {
    <link href="@Url.Content("/Content/DataTables/css/jquery.dataTables.min.css")" rel="stylesheet" />
    <link href="@Url.Content("/Content/DataTables/css/dataTables.scroller.min.css")" rel="stylesheet" />
    <link href="@Url.Content("/Content/DataTables/css/dataTables.bootstrap.min.css")" rel="stylesheet" />
}
*@

6. Add the script related to the dataTable in the script section

@section scripts
{
  <script type="text/javascript">
     $(document).ready( function () {
        $('#employeesTable').DataTable();
     } );
  </script>
}

7. Add to your table the table header <thead> and the table body <tbody> elements.

<table>
  <thead>
  ...
  <tr> ... </tr>
  ...
  </thead>
  <tbody>
  ...
  <tr> ... </tr>
  ...
  </tbody>
</table>

8. Add the id attribute to your table. This id is referenced by JQuery in the scripts section.

<table id="employeesTable" class="table table-hover table-stripe">
...
</table>

9. Test your view where you included the dataTables plugin

   Note: Since site.css is the last style file to be applied, all your custom CSS should go into this file.

   DataTables uses Bootstrap table styles. They may be included in the table tag as follows:

   <table class="table table-hover table-stripe" id="reviewsTable">

   Bootstrap table styles

   DataTables Examples