DataTables.js не загружен

Question

dI'm используя DataTables.js на моем веб-приложении MVC. Вот мои ссылки:

<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> 

Я не могу понять, но моя JQuery загрузки библиотеки дважды (2times я поймать точку останова), jquery.dataTables.min.js - не загружается. Затем я проверил источники в браузере - все правильно - файлы js на месте.

Я ловлю сообщение об ошибке, когда я пытаюсь показать свою сетку:

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 не является функцией

PS: мои boundle скрипты:

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

Где моя ошибка?

Answer 1

Ваши datatables JS & CSS файлы должны быть в связке для стартеров:

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

Добавить сверток datatables Js на вашу страницу, как так:

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

Почему Вы добавляете таблицу динамически ? Лучше просто добавить его в представлении, так это в DOM до загрузки JS:

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

Вот рабочий пример кода на jsFiddle