DataTables.js not loaded

Question

dI'm using DataTables.js on my web MVC application. Here's my links:

<link href="@Url.Content("~/Content/datatables/jquery.dataTables.css")" rel="stylesheet" type="text/css" />
@Scripts.Render("~/bundles/jquery");
<script type=" text/javascript" src="@Url.Content("/Scripts/datatables/jquery.dataTables.min.js")"></script>
<script type="text/javascript" src="@Url.Content("/Scripts/datatables/tables/table.js")"></script>

I can't understand, but my jQuery library loading twice(2times i catch breakpoint), jquery.dataTables.min.js - not loading. Then I checked sources in browser - everything correct - js files in place.

I catch error message when I trying to show my grid:

var dataSet = [
    ['Trident', 'Internet Explorer 4.0', 'Win 95+', '4', 'X'],
    ['Trident', 'Internet Explorer 5.0', 'Win 95+', '5', 'C'],
    ['Trident', 'Internet Explorer 5.5', 'Win 95+', '5.5', 'A'],
    ['Trident', 'Internet Explorer 6', 'Win 98+', '6', 'A'],
    ['Trident', 'Internet Explorer 7', 'Win XP SP2+', '7', 'A'],
    ['Trident', 'AOL browser (AOL desktop)', 'Win XP', '6', 'A']
];

$(document).ready(function () {
    $('#customTable').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');

    $('#example').dataTable({
        "data": dataSet,
        "columns": [
            { "title": "Engine" },
            { "title": "Browser" },
            { "title": "Platform" },
            { "title": "Version", "class": "center" },
            { "title": "Grade", "class": "center" }
        ]
    });
});

Uncaught TypeError: $(...).DataTable is not a function

PS: my boundle scripts:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

            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"));

Where is my mistake?

Try to use the cdn for DataTable. <script type="text/javascript" src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script> — Neerajlal K
– Neerajlal K, Commented May 12, 2015 at 10:18
open page source and check the response for this request <script type=" text/javascript" src="@Url.Content("/Scripts/datatables/jquery.dataTables.min.js")"></script> — Mox Shah
– Mox Shah, Commented May 12, 2015 at 10:35

markpsmith · Accepted Answer · 2015-05-12 14:00:54Z

1

Your datatables js & css files should be in a bundle for starters:

bundles.Add(new ScriptBundle("~/bundles/datatables").Include(
             "~/Scripts/datatables/jquery.dataTables.min.js"));

Add the datatables js bundle to your page like so:

@section Scripts {
    @Scripts.Render("~/bundles/datatables")
}

Why are you adding the table dynamically? Better to just add it to the View so it's in the DOM before the js loads:

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>

Here's a working example of your code on jsFiddle

answered May 12, 2015 at 14:00

markpsmith

4,9182 gold badges38 silver badges65 bronze badges

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

Collectives™ on Stack Overflow

DataTables.js not loaded

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related