DataTables.js not loaded

dI'm using DataTables.js in my MVC web app. Here's my links:

<link href="@Url.Content("~/Content/datatables/jquery.dataTables.css")" rel="stylesheet" type="text/css" />
<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 figure it out, but my jQuery library is loaded twice (2 times I catch a breakpoint), jquery.dataTables.min.js is not loaded. Then I checked the sources in the browser - everything is correct - the js files are in place.

I am breaking the error message when I try 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>');

        "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 graphical scripts:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(

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

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

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(


Where is my mistake?


source to share

1 answer

Your datatables

js and css files should be bundled for starters:

bundles.Add(new ScriptBundle("~/bundles/datatables").Include(


Add datatables

js bundle to your page like this:

@section Scripts {


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

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


Here is a working example of your code on jsFiddle



All Articles