jQuery.fn.dataTable is undefined

Question

My project includes JS files for JQuery.DataTable plugin from NuGet. I also have jQuery 2.1.3 referenced in my project.

Though I load jQuery using <%:Scripts.Render("~/bundles/jquery") %>, reference jQuery UI + DataTables (which gets translated in a successful <script> tag, I get tons of errors in my Firebug console

TypeError: jQuery.fn.dataTable is undefined


else if ( jQuery && !jQuery.fn.dataTable.AutoFill ) {


dataTab...Fill.js (linea 848, col 20)
TypeError: $.fn.dataTable is undefined


$.extend( true, $.fn.dataTable.defaults, {

dataTab...trap.js (riga 2)
TypeError: $.fn.dataTableExt is undefined


$.fn.dataTableExt.oApi.fnColReorder = function ( oSettings, iFrom, iTo )

dataTab...rder.js (riga 110)
TypeError: jQuery.fn.dataTable is undefined


else if ( jQuery && !jQuery.fn.dataTable.ColVis ) {


dataTab...lVis.js (linea 1100, col 20)
TypeError: jQuery.fn.dataTable is undefined


else if ( jQuery && !jQuery.fn.dataTable.FixedColumns ) {


dataTab...umns.js (linea 1392, col 20)
TypeError: jQuery.fn.dataTable is undefined


else if ( jQuery && !jQuery.fn.dataTable.FixedHeader ) {


dataTab...ader.js (linea 1021, col 20)
TypeError: $.fn.dataTable is undefined


$.extend( true, $.fn.dataTable.defaults, {

dataTab...tion.js (riga 2)
TypeError: DataTable is undefined


$.extend( true, DataTable.defaults, {

dataTab...ryui.js (riga 9)
TypeError: jQuery.fn.dataTable is undefined


else if ( jQuery && !jQuery.fn.dataTable.KeyTable ) {


dataTab...able.js (linea 1169, col 20)
TypeError: jQuery.fn.dataTable is undefined


else if ( jQuery && !jQuery.fn.dataTable.Responsive ) {


dataTab...sive.js (linea 794, col 20)
TypeError: jQuery.fn.dataTable is undefined


else if ( jQuery && !jQuery.fn.dataTable.Scroller ) {


dataTab...ller.js (linea 1255, col 20)
TypeError: jQuery.fn.dataTable is undefined


else if ( jQuery && !jQuery.fn.dataTable.TableTools ) {


dataTab...ools.js (linea 3208, col 20)

I have defined the DataTables bundle with

bundles.Add(new ScriptBundle("~/bundles/jquery-ui").Include("~/Scripts/jquery-ui-{version}.js").Include("~/Scripts/jquery.ui.datepicker.js")
.IncludeDirectory("~/Scripts/DataTables-1.10.4", "*.js", false));

That gets translated into at least

<script src="/Scripts/DataTables-1.10.4/dataTables.autoFill.js">
<script src="/Scripts/DataTables-1.10.4/dataTables.bootstrap.js">
<script src="/Scripts/DataTables-1.10.4/dataTables.colReorder.js">
<script src="/Scripts/DataTables-1.10.4/dataTables.colVis.js">
<script src="/Scripts/DataTables-1.10.4/dataTables.fixedColumns.js">
<script src="/Scripts/DataTables-1.10.4/dataTables.fixedHeader.js">
<script src="/Scripts/DataTables-1.10.4/dataTables.foundation.js">
<script src="/Scripts/DataTables-1.10.4/dataTables.jqueryui.js">
<script src="/Scripts/DataTables-1.10.4/dataTables.keyTable.js">
<script src="/Scripts/DataTables-1.10.4/dataTables.responsive.js">
<script src="/Scripts/DataTables-1.10.4/dataTables.scroller.js">
<script src="/Scripts/DataTables-1.10.4/dataTables.tableTools.js">
<script src="/Scripts/DataTables-1.10.4/jquery.dataTables.js">

The same happens with Superfish but let's solve one thing at a time. How can I solve this?

Answer 1

Rory's comment above answers this question.

jquery.dataTables.js needs to be loaded first, before the autofill,bootstrap etc. files. You need to implement IBundleOrderer, or include the files in that order manually. More info here: How can I specify an explicit ScriptBundle include order?

I found simply writing my DataTable bundle like this solved my issues:

bundles.Add(new ScriptBundle("~/bundles/datatable").Include(
            "~/Scripts/dataTables/jquery.dataTables.js",
            "~/Scripts/dataTables/dataTables*"));