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.

Well, when I look at the source, my script is called before jquery, so I know why it is undefined, but I thought modernizer would run jquery before my script since it is included in the _layout.cshtml file. — Xaisoft
– Xaisoft, Commented Apr 26, 2013 at 20:02
I thought modernizer includes it, that is called in my _Layout.cshtml. — Xaisoft
– Xaisoft, Commented Apr 26, 2013 at 20:04
I added it to my _layout.cshtml, but now I get another error. — Xaisoft
– Xaisoft, Commented Apr 26, 2013 at 20:05

Community · Accepted Answer · 2017-05-23 12:19:16Z

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

Tim B James · Accepted Answer · 2013-04-26 20:08:42Z

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(){ .... }

Tim, jQuery was already there. I added the dataTable one as ~/bundles/tables and added it to my _Layout.cshtml, but it says dataTable is not a method
Tim, I put @Scripts.Render("~/bundles/table") at the top of my page, but when viewing source, I don't see the dataTables plugin script. Also, if it is already rendered with Layout.cshtml, why do I have to put it in my Index.cshtml page as well?
No you don't need it in your Index.cshtml. Just make sure that the code in your Index.cshtml is after the Rendering of the scripts on the _Layout page.
I put it at the top, but I don't even see the plugin loaded.
Its calling jquery and then my script. It is not loading the dataTable plugin that I put into ~/bundles/table.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

6 Comments

Linked

Related