jQuery DataTable won't work in ASP.NET MVC?

Question

I have an index.cshtml file with a simple table. I downloaded the css file and the min js file for the dataTable plugin. I put the following code in BundleConfig.cs:

bundles.Add(new ScriptBundle("~/bundles/table").Include(
                        "~/Scripts/jquery.dataTables.min.js"));

 bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css",
                        "~/Content/themes/base/jquery.dataTables.css"));
        }

In my _Layout.cshtml, I have this:

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/table")

Finally, in my index.cshtml, I put the following code above my table:

<script type="text/javascript">
    $(document).ready(function () {
        $('#patients').dataTable();
    });
    </script>

I noticed when I run the page with the table and view the source, I see the jquery file at the bottom and my script at the top, so I get the error:

Uncaught ReferenceError: $ is not defined

Is BundleConfig the correct place to add new js and css files? How do I do it if I don't want it to be there? Why is jquery script run at the bottom of the page?

I added the following to _Layout.cshtml:

@Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/table")

but now I get this error:

Uncaught TypeError: Object [object Object] has no method 'dataTable'

When I view the source, I see the dataTables.min.js is not there, but I have included it in bundles/table.

Answer 1

By default if you have Debug="True" in your web.config, minimized javascript files are not included in bundles. Add this to your BundleConfig.cs (or use a non-minified javascript file, or run in non-debug mode):

#if DEBUG
            //by default all minimized files are ignored in DEBUG mode. This will stop that.
            bundles.IgnoreList.Clear();
#endif

Additional info: Bundler not including .min files

Answer 2

Modernizer, out of the box with an asp.net MVC project, has nothing to do with jQuery.

I would update your bundles so you have one for jQuery and one for jQuery plugins, or one that does both. e.g.

bundles.Add(new ScriptBundle("~/bundles/jQuery").Include(
                        "~/Scripts/jquery-{version}.min.js"));
bundles.Add(new ScriptBundle("~/bundles/jQueryPlugins").Include(
                        "~/Scripts/jquery.dataTables.min.js"));

If you add any additional jQuery plugins, then just register them with the jQueryPlugins bundle.

Then make sure that in your _Layout you Render the jQuery bundle first.

@Scripts.Render("~/bundles/jQuery")
@Scripts.Render("~/bundles/jQueryPlugins")

This way you know you always have jQuery included before the plugins.

Note

Also make sure that you have your scripts rendered before your jQuery code which is on your page. e.g.

@Scripts.Render("...")

Before

$(document).ready(function(){ .... }