ASP.NET MVC5 JQuery Datatables CSS not working with Bootstrap Lumen

Question

I'm not able to get the right styling for my datatables. This is how my datatables look right now

This is my BundleConfig.cs file:

public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js",
                    "~/Scripts/DataTables/jquery.dataTables.js",
                    "~/Scripts/DataTables/dataTables.bootstrap.js"
            ));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));


        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/scripts/bootbox.js",
                  "~/Scripts/respond.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap-lumen.css",
                  "~/Content/datatables/css/dataTables.bootstrap.css",
                  "~/Content/site.css"
            ));
    }

and this is what I'm rendering in my _Layout.cshtml:

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/dataTables.bootstrap.css">
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/modernizr")
@RenderSection("scripts", required: false)
@Styles.Render("~/Content/css")

It works if I remove the Lumen css file from my BundleConfig.cs:

bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/datatables/css/dataTables.bootstrap.css",
                  "~/Content/site.css"
            ));

I'm using Bootstrap 3.0.0, JQuery 1.10.2 and datatables 1.10.11. I know these versions are old but i'm learning MVC from Mosh Hamedani's course and he's using these versions so I'm just trying to follow him atm.

Answer 1

Turns out the problem is in the Lumen theme. I changed to various other themes to check if they have the same problem and it's only Lumen. Datatables are working fine in all other themes.

Answer 2

I had the exact same problem with the lumen theme. Instead of using the local or downloaded files. I used the cdn links of jquery.datatables and it worked for me. Use this in your layout file :-

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>