javascript - DataTables.js not loaded -

di'm using datatables.js on web mvc application. here's 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, jquery library loading twice(2times catch breakpoint), jquery.datatables.min.js - not loading. checked sources in browser - correct - js files in place.

i catch error message when trying show 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 not function

ps: 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 development version of modernizr develop , learn from. then, when you're             // ready production, use build tool @ http://modernizr.com pick tests 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 mistake?

your datatables js & css files should in bundle starters:

bundles.add(new scriptbundle("~/bundles/datatables").include(              "~/scripts/datatables/jquery.datatables.min.js")); 

add datatables js bundle page so:

@section scripts {     @scripts.render("~/bundles/datatables") } 

why adding table dynamically? better add view it's in dom before js loads:

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

here's working example of code on jsfiddle