Proper bundling of DataTables in ASP.net MVC

Question

I've run nuget for datatables and I'm trying to bundle them so that it works in all my views. However, it doesn't seem to be working properly. the datatable functionality is occuring, but the Datatables formatting is not occuring. I assume I'm not bundling the CSS properly, but I'm not sure. Here is my bundle in BundleConfig:

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

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

and then _Layout:

    @Scripts.Render("~/bundles/datatables")
    @Styles.Render("~/content/datatables")

and here is the view I'm attempting to us it in:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script >
$(document).ready(function () {
    var table = $('#SchedulesTable').DataTable();
});
</script>

What am I doing wrong?

Answer 1

I don't believe that you can use "~/Content/datatables" as a CSS bundle when that directory actually exists. It looks like it already exists since what you are trying to include is: "~/Content/DataTables/css/dataTables.bootstrap.css". The content/datatables is a real existing directory. Name the bundle something else, you should be fine.