jQuery DataTable won't work in ASP.NET MVC?
asp.net-mvc, datatables, jquery
Solution
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
Problem
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.