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?

Note `~/Content/datatables/` and `~/content/datatables`. I can't remember off the top of my head if bundle names are case sensitive. I suspect they aren't, but better to keep this consistent regardless — Rory McCrossan, Jun 07 '18 at 19:07
is there a reason you're including both the minified and non-minified versions? ASP.NET should automatically include the minified versions when you're not running in debug mode. — Heretic Monkey, Jun 07 '18 at 19:08
Might want to take a look at [Mvc4 datatables does not work in script bundle](https://stackoverflow.com/q/36356085) — Heretic Monkey, Jun 07 '18 at 19:09
Bundles do not appear to be case sensitive. I changed the name of the bundle for the css to "Content" from "content" and did not result in the formatting I was expecting. I included the minified and non-minified versions in an attempt to try various solutions to get this working. I'll look at the provided link, thank you. — Patrick Foy, Jun 07 '18 at 19:15

score 4 · Accepted Answer · answered Jun 07 '18 at 19:21

4

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.

answered Jun 07 '18 at 19:21

Steve

78
3

If you don't want to rename the bundle, move the CSS to a different folder and change your include to pull it from the folder you moved it to. Make sure you delete the Content/DataTables folder (after you move it). – Steve Jun 07 '18 at 19:30
I changed the bundle's name from /Content/Datatables to /Content/themes/base/datatables/css (which definitely doesn't exist) but the result is the same. am I bundling the wrong things? Is there something in the CSS that I'm supposed to bundle other than dataTables.bootstrap.css? – Patrick Foy Jun 07 '18 at 20:06
do you have a /Content/themes folder? – Steve Jun 07 '18 at 20:25

score 1 · Answer 2 · edited Dec 18 '19 at 15:31

1

OK, it was a combination of two things. the first was I did not included a css file in the bundle that I should have (the file jquery.dataTables.css), AND on top of that I was using a directory that actually existed. Adding the additional file to the bundle and changing to a directory that doesn't exist fixed it.

edited Dec 18 '19 at 15:31

Mike Polen

3,586
1
27
31

answered Jun 07 '18 at 20:17

Patrick Foy

272
2
12

Proper bundling of DataTables in ASP.net MVC

2 Answers2

Linked