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

7

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

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered Apr 26, 2013 at 21:20

Andrew Lewis

5,2941 gold badge29 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Xaisoft Over a year ago

This was it. It was totally throwing me off. Thanks.

Stachu Over a year ago

10 months later: thanks!! Finally that headache is gone.

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

1

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

answered Apr 26, 2013 at 20:08

Tim B James

20.4k4 gold badges77 silver badges108 bronze badges

6 Comments

Xaisoft Over a year ago

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

Xaisoft Over a year ago

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?

Tim B James Over a year ago

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.

Xaisoft Over a year ago

I put it at the top, but I don't even see the plugin loaded.

Xaisoft Over a year ago

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