JQuery DataTable will not work in ASP.NET MVC?

Question

I have an index.cshtml file with a simple table. I uploaded the css file and 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 that when I launch a page with a table and look at the source code, I see the jquery file at the bottom and my script at the top, so I get an error message:

Uncaught ReferenceError: $ is not defined

Is BundleConfig the right place to add new js and css files? How can I do this if I do not want him to be there? Why does jquery script work 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] does not have a 'dataTable' method

When I look at the source, I see that dataTables.min.js does not exist, but I 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 packages. Add this to your BundleConfig.cs (either use a non-minified javascript file or run it 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 Information: Bundler, not including .min files

Answer 2

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

I would update your packages, so you have one for jQuery and one for jQuery plugins, or one that does both. eg.

 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 additional jQuery plugins, simply register them using the jQueryPlugins package.

Then make sure that in your _Layout you first port the jQuery package.

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

This way, you know that jQuery is always included before plugins.

Note

Also make sure you have your scripts presented before the jQuery code that is on your page. eg

 @Scripts.Render("...") 

Front

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